我有以下代码如何添加水平滚动条用于UL表
HTML代码
<section class="admin-dashboard-manage">
<ul class="information-header">
<li>Title</li>
<li>Start Date</li>
<li>Start Time</li>
<li>End Time</li>
<li>Category Name</li>
<li>Location</li>
</ul>
<div class="information-data-body">
<ul class="information-data">
<li>Youth 5.5yr-12yr (Group) </li>
<li>2015-08-10</li>
<li>09:30:00</li>
<li></li>
<li>Unknown</li>
<li>Arena Sports @ Issaquah </li>
<li>Button</li>
</ul>
<ul class="information-data">
<li>Youth 5.5yr-12yr (Group) </li>
<li>2015-08-10</li>
<li>09:30:00</li>
<li></li>
<li>Unknown</li>
<li>Arena Sports @ Issaquah </li>
<li>Button</li>
</ul>
</div>
</section>
CSS
.admin-dashboard-manage .information-header {
background: #0aa699 none repeat scroll 0 0;
color: #fff;
}
.admin-dashboard-manage .information-header > li, .admin-dashboard-manage .information-data > li {
display: inline-block;
line-height: 50px;
vertical-align: top;
width: 24%;
}
.information-data{
border-bottom:1px solid #000;
}
什么IM,努力实现是在一条线上显示所有信息栏,而不用将后面的栏堆叠在一起。我的问题是列的数量增加列向下移动。我想要的是当列数增加时,通过使用水平滚动条在一行中显示所有列。
http://jsfiddle.net/h32x869v/26/ –