如何添加水平滚动条用于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，努力实现是在一条线上显示所有信息栏，而不用将后面的栏堆叠在一起。我的问题是列的数量增加列向下移动。我想要的是当列数增加时，通过使用水平滚动条在一行中显示所有列。

Here is my Fiddle

来源

2015-07-19 Shanaka

http://jsfiddle.net/h32x869v/26/ –

溢出 - X：滚动; white-space：nowrap;

打开.information-header。

来源

2015-07-19 17:16:58 Kjell

与以下你可以添加滚动条，但是当信息是漫长它转到下一列。 – Shanaka

如何添加： '部分溢出-x：scrolll; }' 并且还会做什么@威尔在显示器上说：在李的内联。并摆脱我在标题上建议的溢出。 – Kjell

使用display: inline而不是display:inline-block。

.admin-dashboard-manage .information-header > li, .admin-dashboard-manage .information-data > li { 
    display: inline; 
    ... 
}

然后你就可以添加适当的填充，边距等你可能想这样你就不会“破发”的其他漂亮的格式，你必须只将此您关于信息头创建。

编辑1：

我试图确保文本将不会跳与“NOWRAP”属性下一行。

section { 
    width: 100%; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

section { 
    width: 100%; 
}

来源

2015-07-19 17:17:20 wkcamp

有了这个，您可以获得水平滚动条，但是当数据很长时，文本会移动到下一行。我需要将滚动条添加到

标记 – Shanaka

正在更新。 – wkcamp

这是足够接近，你可以注意到半列结束的列：http://jsfiddle.net/h32x869v/10/ – Shanaka

我得到的答案是足够接近，但表结束了一半通过。这是通过将display:inline-block;添加到头部来解决的。并为信息部分添加了width:100%;。

updated fix

来源

2015-07-23 08:29:38 Shanaka

如何添加水平滚动条用于UL表

回答

相关问题