如何顯示水平

我有一個新的要求，以顯示items..say的大名單..

<ul> 
<li>one</li> 
<li>two</li> 
. 
. 
<li>forty</li> 
</ul>

這必須要麼顯示像項目的大名單

one  Four 
two  Five 
three Six...........Forty

或者

one  two  three.... 
... 
... Forty

我是這個html/css的新手。內聯和其他一些修補程序不起作用。請幫助一些jsfiddle工作示例。

注意：只需要在一列中顯示3/4項目，最多6至8列應顯示如下所示。在此先感謝。

來源

2016-01-08 vsm

你能舉個例子嗎？我沒有得到它。 –

輸出結果對我來說是不清楚的：你需要以3行還是3列的方式顯示40個表格結構的項目，對嗎？ – fcalderan

添加例子..找到它.. – vsm

CSS Columns將是一個選擇在這裏：

ul { 
 
    list-style-type: none; 
 
    -webkit-column-count: 8; 
 
    -moz-column-count: 8; 
 
    column-count: 8; 
 
    -webkit-column-gap: 5px; 
 
    -moz-column-gap: 5px; 
 
    column-gap: px; 
 
    margin: 1em; 
 
    padding: 0; 
 
} 
 
li { 
 
    border: 1px solid grey; 
 
}

<ul> 
 
    <li>List Item 1</li> 
 
    <li>List Item 2</li> 
 
    <li>List Item 3</li> 
 
    <li>List Item 4</li> 
 
    <li>List Item 5</li> 
 
    <li>List Item 6</li> 
 
    <li>List Item 7</li> 
 
    <li>List Item 8</li> 
 
    <li>List Item 9</li> 
 
    <li>List Item 10</li> 
 
    <li>List Item 11</li> 
 
    <li>List Item 12</li> 
 
    <li>List Item 13</li> 
 
    <li>List Item 14</li> 
 
    <li>List Item 15</li> 
 
    <li>List Item 16</li> 
 
    <li>List Item 17</li> 
 
    <li>List Item 18</li> 
 
    <li>List Item 19</li> 
 
    <li>List Item 20</li> 
 
    <li>List Item 21</li> 
 
    <li>List Item 22</li> 
 
    <li>List Item 23</li> 
 
    <li>List Item 24</li> 
 
    <li>List Item 25</li> 
 
    <li>List Item 26</li> 
 
    <li>List Item 27</li> 
 
    <li>List Item 28</li> 
 
    <li>List Item 29</li> 
 
    <li>List Item 30</li> 
 
    <li>List Item 31</li> 
 
    <li>List Item 32</li> 
 
    <li>List Item 33</li> 
 
    <li>List Item 34</li> 
 
    <li>List Item 35</li> 
 
    <li>List Item 36</li> 
 
    <li>List Item 37</li> 
 
    <li>List Item 38</li> 
 
    <li>List Item 39</li> 
 
    <li>List Item 40</li> 
 
</ul>

來源

2016-01-08 11:47:32

嗨Paulie_D，對不起delay..your代碼工作正常對於我..但我想限制1列的6篇文章如上圖所示..我可以實現這個..感謝您的代碼:) – vsm

你必須做出選擇多少列你想要的高度和列表。如果將列的高度設置爲6列表項的高度，則不需要'column-count'屬性。 –

是的paulie_D我同意你..但文章的名稱每次都有很大的名稱，導致2行顯示，我想限制只有6篇文章，而不是身高，這不會幫助我，當我有一個很大的長度單詞..建議建議一些想法.. – vsm

入住這下面撥弄

jsfiddle

CSS：

ul li { 
    list-style-type:none; 
    display:inline-block; 
    padding:5px 0; 
    margin:5px 2%; 
    background-color:red; 
    width:20%; 
    text-align:center; 
}

來源

2016-01-08 10:05:54

這也是工作正常..精確地下面一個幫助與列計數以及..感謝您的幫助阿倫:) – vsm

如何顯示水平

回答

相關問題