2

我有一个 Parent Div chatRooms，里面有很多chatRoom's，并且chatRoomNameDiv 仅用于正确格式化。

我的意图是让每一个都chatRoom float:left;在前一个旁边chatRoom，然后有一个水平滚动条，以防 all 的最大宽度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;
}
4

2 回答 2

3

尝试使用内联块而不是浮动元素并使用空格：nowrap;

见小提琴http://jsfiddle.net/AFGU4/

.chatRoom
{
    width:100px;
    border-style:solid;
    border-color:green;
    margin-right:1px;
    display: inline-block;
    cursor:pointer;
}
于 2012-08-01T13:11:23.903 回答
2

在这种情况下需要的是display: inline-block;而不是float: left;. 通过制作您div的 sinline-block并添加white-space: nowrap;它们的父级，您将确保divs 将始终在一行上。如有必要，添加overflow-x: auto;将提供水平滚动。

于 2012-08-01T13:10:06.020 回答