将DIVs彼此对齐并在HTML中添加水平ScrollBar

Question

我有一个父级的Div chatRooms，里面有许多chatRoom，chatRoomName Div只是为了正确的格式化而制作的。

我的意图是使每个chatRoom float:left;旁边的前一个chatRoom，然后有一个水平滚动条，以防所有chatRoom的最大宽度超过父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

尝试使用内联块而不是浮动元素，并使用空格: nowrap；

请参阅fiddle http://jsfiddle.net/AFGU4/

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

Answer 2

在这种情况下，需要的是display: inline-block;而不是float: left;。通过创建div的inline-block并在其父对象上添加white-space: nowrap;，可以确保div始终在一行上。如有必要，添加overflow-x: auto;将提供水平滚动。