如何显示水平

我有一个新的要求，以显示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

如何显示水平

回答

相关问题