邊距不工作後，明確雙方

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