對齊旁邊的DIV和在HTML中添加一個水平滾動條

Question

我有一個Parent Div chatRooms，裏面有很多chatRoom's，而chatRoomName Div只用於正確的格式。

我的目的是使每個chatRoomfloat:left;以前chatRoom旁邊，然後有一個水平滾動條的情況下，所有chatRoom的超過父DIV chatRooms的寬度的最大寬度，這實際上是工作，但超過chatRoom被放置在第二行，而不是最後一個chatRoom旁邊，我希望它們都在同一行上說，即使其中一些不能被看到，但是當我滾動時，我將能夠看到它們對。

<div id="chatRooms"> 

            <div class="chatRoom"> 
             <div class="chatRoomName"> 
             IUL 
             </div> 
            </div> 
            <div class="chatRoom"> 
             <div class="chatRoomName"> 
             CCE 
             </div> 
            </div> 
            <div class="chatRoom"> 
             <div class="chatRoomName"> 
             CCE 
             </div> 
            </div> 
            <div class="chatRoom"> 
             <div class="chatRoomName"> 
             CCE 
             </div> 
            </div> 
            <div class="chatRoom"> 
             <div class="chatRoomName"> 
             CCE 
             </div> 
            </div> 
            <div class="chatRoom"> 
             <div class="chatRoomName"> 
             CCE 
             </div> 
            </div> 
            <div class="chatRoom"> 
             <div class="chatRoomName"> 
             CCE 
             </div> 
            </div> 
            <div class="chatRoom"> 
             <div class="chatRoomName"> 
             CCE 
             </div> 
            </div> 
            <div class="chatRoom"> 
             <div class="chatRoomName"> 
             CCE 
             </div> 
            </div> 
            <div class="chatRoom"> 
             <div class="chatRoomName"> 
             CCE 
             </div> 
            </div> 

           </div> 

CSS：

#chatRooms 
{ 
    border-style:solid; 
    border-width: 1px; 
    border-color: green; 
    overflow-x:scroll; 

    margin-top:5px; 
    height:30px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
.chatRoom 
{ 
    width:100px; 
    border-style:solid; 
    border-color:green; 
    margin-right:1px; 
    float:left; 
    cursor:pointer; 
} 
.chatRoomName:hover 
{ 
    color:chartreuse; 
} 
.chatRoomName 
{ 
    background-color:green; 
    border-style:solid; 
    border-color:green; 
    color:white; 
} 

Answer 1

需要在這種情況下，什麼是display: inline-block;而不是float: left;。通過使您的div的inline-block和white-space: nowrap;的父母您將確保div將始終在一條線上。如有必要，添加overflow-x: auto;將提供水平滾動。

Answer 2

嘗試使用內嵌塊代替浮動元素並使用空格：nowrap;

看到小提琴http://jsfiddle.net/AFGU4/

.chatRoom 
{ 
    width:100px; 
    border-style:solid; 
    border-color:green; 
    margin-right:1px; 
    display: inline-block; 
    cursor:pointer; 
}