Question

我有以下代码

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;      
}

我想要实现的是在一行上显示所有信息列而不将后一列堆叠在一起。我的问题是当列数增加时列向下移动。我想要的是当列数增加时使用水平滚动条在一行中显示所有列。

Here is my Fiddle

Answer 1

overflow-x：滚动; 空白：NOWRAP;

在.information-header上。

Answer 2

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

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

然后您可以添加适当的填充，边距等。您可能只想将此应用到.information-header中，这样您就不会＃34;破＆＃34;你创建的其他很好的格式。

编辑1：

我试图确保文本不会跳转到下一行＆＃34; nowrap＆＃34;属性。

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

section {
  width: 100%;
}

Answer 3

我得到的答案足够接近，但桌子结束了一半。通过向主题部分添加width:100%;来解决此问题。并为信息部分添加了{{1}}。

updated fix

如何为ul表添加水平滚动条

3 个答案: