边距不工作后，明确双方

Question

你好我创建它看起来像这样聊天界面：

img http://gyazo.com/96a27ffed5203d3b435fe41d8832e1ca.png

正如你可以看到，每一个消息现在是一个li元素的化身和消息div是左移。现在，如果我不在li元素上添加clear: both;，元素将在一行中一个接一个。所以在两者都清楚之后，当我做margin-top时，为了在消息元素之间创建一些填充，除非添加了500px的边距或其他内容，否则它不会执行任何操作。

<section id="chat-area"> 
    <section id="users-in-chat"> 
    <ul> 
     <li><img src="images/avatar-big.png"/></li> 
    </ul> 
    </section> 
    <section id="chat-messages"> 
    <ul> 
     <li><img src="images/avatar-big.png" class="message-avatar"/> 
     <div class="message"><span>So yeah I am good how are you? I am currently in this shit and i should finish it asap so ill t alk to you laterSo yeah I am good how are you? I am currently in this shit and i should finish it asap so ill t alk to you later</span></div> 
     </li> 
     <li><img src="images/avatar-big.png" class="message-avatar"/> 
     <div class="message"><span>So yeah I am good how are yoly in this shit and i shou later</span></div> 
     </li> 
    </ul> 
    </section> 
</section> 

而CSS：

#chat-messages ul { 
    list-style: none; 
    padding: 20px; 
} 

#chat-messages ul li { 
    clear: both; 
    margin-top: 15px; 
} 

#chat-messages ul li:first-child { 
    margin-top: 0; 
} 

.message-avatar { 
    -webkit-border-radius: 20px 20px 20px 20px; 
    border-radius: 20px 20px 20px 20px; 

    float: left; 
} 

.message { 

    margin-left: 15px; 

    padding: 15px; 
    max-width: 70%; 
    background-color: rgba(144, 195, 245, 0.3); 
    -webkit-border-radius: 0 20px 20px 20px; 
    border-radius: 0 20px 20px 20px; 

    float: left; 
} 

我做了什么错在那里？

Answer 1

试试这个：

#chat-messages ul li { 
 
    clear: both; 
 
    margin-top: 15px; 
 
    float: left; 
 
}

Answer 2

#chat-messages ul li { 
clear: both; 
margin-top: 15px; 
overflow:hidden; 
}