左右对齐消息气泡

我想要做的是将每个消息气泡对齐到一边，所以第一个消息气泡会在左边，第二个在右边。目前，您可能在小提琴中看到的问题是，如果信息太短，它会显示在同一行上。左右对齐消息气泡

请展开 “结果” 窗口，以便看到fiddle

问题下面的代码也：

HTML：

<section id="chat-box" class="clearfix"> 
    <ul class="messages clearfix"> 
     <li>hefajgf jajgahg jahgjahgjahgj ahgjahgjaghajhg</li> 
     <li>hefajgfagkjhajhgajhgajsghjasghajagkjagjka eieajgieagjaeigjaei jeagi</span></li> 
     <li>hello</li> 
     <li>hello</li> 
    </ul> 
</section>

CSS：

body { 
    background: #e6e7e9; 
    font-family: 'Lato', sans-serif; 
    font-weight: 400; 
} 
.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
} 
* html .clearfix { 
    height: 1%; 
} 
.clearfix { 
    display: block; 
} 
section#chat-box { 
    background: #fff; 
    padding: 10px; 
    height: ; 
    margin: 0 auto; 
    max-width: 600px 
} 

ul.messages { 
    padding: 10px; 
    list-style-type: none; 
} 

ul.messages li { 
    display: block; 
    position: relative; 
    float: left; 
    min-width: 250px; 
    background: #a6acba; 
    border: 4px solid transparent; 
    border-radius: 4px; 
    padding: 5px; 
    color: #fff; 
    font-weight: 700; 
    margin-bottom: 15px; 
} 

ul.messages li:after, ul.messages li:before { 
    right: 100%; 
    top: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

ul.messages li:after { 
    border-color: rgba(166, 172, 186, 0); 
    border-right-color: #a6acba; 
    border-width: 12px; 
    margin-top: -16px; 
} 
ul.messages li:before { 
    border-color: rgba(0, 0, 0, 0); 
    border-right-color: transparent; 
    border-width: 26px; 
    margin-top: -26px; 
} 

ul.messages li:nth-child(2n) { 
    background: #76a0be; 
    float: right; 
} 

ul.messages li:nth-child(2n):after, ul.messages li:nth-child(2n):before { 
    border-right-color: transparent; 
    left: 100%; 
} 

ul.messages li:nth-child(2n):after { 
    border-left-color: #76a0be; 
} 
ul.messages li:nth-child(2n):before { 
    border-left-color: transparent; 
}

来源

2015-10-24 poseidon23

您缺少clear的两边都有0个元素。

尝试添加此CSS规则：

li{ 
    display: block; 
    clear: both; 
}

你可以将这些规则上更合适的地方，我做了这样只是为了告诉你什么是你失踪。

请参阅fiddle

来源

2015-10-24 19:22:24 Chris

左右对齐消息气泡

回答

相关问题