Question

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

我的意图是让每个chatRoom float: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

尝试使用内联块代替浮动元素并使用white-space：nowrap;

请参阅小提琴http://jsfiddle.net/AFGU4/

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

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

2 个答案: