2

親 DivchatRoomsがあり、その中には多くchatRoomの があり、chatRoomNameDiv は適切な書式設定のためだけに作成されました。

私の意図はchatRoom float:left;、前のものの横にそれぞれを作成し、すべての最大幅が親 div の幅を超えるchatRoom場合に備えて水平スクロール バーを用意することです。これは実際には機能していますが、超過分は 2 行目に配置されています。 、最後の.chatRoomchatRoomschatRoomchatRoom

<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;. divsを作成してその親inline-blockに追加することにより、 s が常に 1 行になることが保証されます。追加すると、必要に応じて水平スクロールが提供されます。white-space: nowrap;divoverflow-x: auto;

于 2012-08-01T13:10:06.020 に答える