서로 옆에 DIV 정렬 및 HTML에 가로 스크롤 막대 추가

Question

부모 항목이 chatRooms이고 그 안에 chatRoom이 많이 있고, chatRoomName Div는 올바른 형식 지정을 위해서만 만들어졌습니다.

내 의도는, 다음 경우의 부모 DIV chatRooms의 폭을 초과하는 모든 chatRoom의 최대 폭을 가로 스크롤 막대를 이전 chatRoom 옆에 각 chatRoomfloat:left;을 만드는 것입니다,이 실제로 작동하지만 초과 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;입니다. 을 만들고 white-space: nowrap;을 부모에 추가하면 div이 항상 한 줄로 표시됩니다. overflow-x: auto;을 추가하면 필요한 경우 horisontal 스크롤을 제공합니다.

Answer 2

요소를 떠 다니고 공백을 사용하여 인라인 블록을 사용해보십시오. nowrap; nowrap;

는 바이올린을 참조 http://jsfiddle.net/AFGU4/

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