html文字对齐很奇怪

Question

我经历了一些奇怪的文字对齐，您能给我一个提示：

我试图创建一个segressbubble：

.round
{
margin-top: 5px;
border-radius:50%;
background-color:#3d5177;
width:50px;
height:50px;
float: left;
}
.number {
color: white;  
padding: 8px 17px;
font-size: 30px;
font-weight: normal;
}
.faq_container {
overflow: hidden;
}
.talkbubble {
left: 80px;
position: relative;
width: 340px;
height: 100px;
padding: 0px;
background: #aaaaaa;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
 }
.talkbubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 13px 10px 0;
border-color: transparent #aaaaaa;
display: block;
width: 0;
z-index: 1;
left: -13px;
top: 22px;
 }
 .talkbubble_text {
display: block;
text-align: left;
padding: 10px;  
 }

http://jsfiddle.net/lf4sr/

谢谢

Answer 1

问题是<div class="round"> CSS 。元素的宽度将文本推向右侧。

将其添加到.round类：

.round {
     top: 0;
     left: 0;
     position: absolute;
}

并将其添加到.faq_container类：

.faq_container {
    position: relative;
}

演示

注意：您可以从.round中删除float: left;。

Answer 2

正确的CSS应该是：

.talkbubble {
left: 30px; /* or Whatever you may want the distance from the circle to be */
position: relative;
width: 340px;
height: 100px;
padding: 10px;
background: #aaaaaa;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
float: left;
}
 .talkbubble_text {
 display: inline;
 text-align: left;
/* padding: 10px; ( remove this )*/
}

Answer 3

尝试将float:left添加到.talkbubble容器

Answer 4

您可以尝试以下方法：

小提琴

.talkbubble_text {
display: inline-block;
text-align: left;
padding: 10px;  
    line-height:16px;
}

祝你好运...：）

Answer 5

我认为问题是您的最后一行文本并不与其他文本内联。这是由于您制定代码的方式。您的文字被您的圆元元素推开，这是设定的高度。在此之后的任何文本都没有被推开，快速修复将是在数字圆的底部添加边距。

.round
{
    margin-top: 5px;
    border-radius:50%;
    background-color:#3d5177;
    width:50px;
    height:50px;
    float: left;
    margin-bottom : 50px;
}

http://jsfiddle.net/lf4sr/4/

，但最好将您的代码重组一些以阻止这种情况首先发生。

Answer 6

更改positions，将overflow:hidden添加到.talkbubble_text，以防止float左对齐。Fiddle。

Answer 7

更新：http://jsfiddle.net/bushwazi/lf4sr/8/

在此示例中可以清理很多东西。有很多额外的HTML。但是核心问题是，如果您将float用于一个部分，则必须将其用于两者。因此，您需要将float:left or right添加到.talkbubble并删除left值。

.talkbubble {
    /* left: 80px; */
    position: relative;
    width: 340px;
    height: 100px;
    padding: 0px;
    background: #aaaaaa;
    float:left;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

我在小提琴中做了很多其他事情，以简化并消除额外的HTML/CSS。但是核心问题是将positioning与float混合并仅选择一个。