html - 溢出和浮动

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>

我想拥有带有水平滚动条的聊天栏 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;//

}

元素相互附加。希望找到解决方案。

Answer 1

尝试在您的 .chatbox CSS 中添加“位置：相对”？

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