溢出和浮

Question

我有這些HTML標記

<div class="chatbar"> 
     <div class="chatbox" style="margin-right:0px"> first</div> 
     <div class="chatbox" style="margin-right:5px"> chatbox</div> 
     <div class="chatbox" style="margin-right:10px"> chatbox</div> 
     <div class="chatbox" style="margin-right:15px"> chatbox</div> 
      <div class="chatbox" style="margin-right:20px"> chatbox</div> 
       <div class="chatbox" style="margin-right:25px"> chatbox</div> 


    </div> 

我想和水平滾動條.. 但其沒有工作，這裏是我的CSS

.chatbox{ 
float:right; 

    height: 180px; 
width: 250px; 
margin-right:10px; 
border-right:1px solid red; 
border-left:1px solid red; 
} 

.chatbar { 
border: 1px solid blue; 
    overflow-x:scroll; 
overflow-y:hidden; 
width: 980px; 
height: 200px; 
position: relative; 
bottom:10px; 

float:right;// 

} 

元素被追加chatbar DIV在彼此之上。希望找到解決方案。

Answer 1

嘗試在你的.chatbox CSS中添加'position：relative'嗎？

.chatbar { width:200px; overflow-x:auto; overflow-y:hidden; } 
    .wrapper { width: 600px; } 
    .chatbox { width:100px; float:left; } 

    <div class="chatbar"> 
     <div class="wrapper"> 
      <div class="chatbox"> first</div> 
      <div class="chatbox"> chatbox</div> 
      <div class="chatbox"> chatbox</div> 
      <div class="chatbox" > chatbox</div> 
      <div class="chatbox" > chatbox</div> 
      <div class="chatbox" > chatbox</div> 
     </div> 
    </div>