html中位div添加水平线,对齐旁边的DIV和在HTML中添加一个水平滚动条

我有一个Parent Div chatRooms，里面有很多chatRoom's，而chatRoomName Div只用于正确的格式。对齐旁边的DIV和在HTML中添加一个水平滚动条

我的目的是使每个chatRoomfloat:left;以前chatRoom旁边，然后有一个水平滚动条的情况下，所有chatRoom的超过父DIV chatRooms的宽度的最大宽度，这实际上是工作，但超过chatRoom被放置在第二行，而不是最后一个chatRoom旁边，我希望它们都在同一行上说，即使其中一些不能被看到，但是当我滚动时，我将能够看到它们对。

IUL

CCE

CCE

CCE

CCE

CCE

CCE

CCE

CCE

CCE

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;

}