如何添加水平滾動條用於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表

回答

相關問題