0

これらの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;//

}

要素が互いに追加されています。その解決策を見つけてください。

4

1 に答える 1

1

'position:relative' を .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>
于 2013-03-30T19:08:46.363 に答える