Question

我遇到了一些奇怪的文字对齐，你能不能给我一个问题所在的提示：

我试图创建一个语音泡泡：

.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;
}

<强> Demo

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

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

你可以试试这个：

Fiddle here

.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混合，只选择一个。

HTML文本对齐奇怪

7 个答案: