我正在尝试编写灵活的代码,我有一个普通的 <ul>
它会自动为每第 5 个元素创建另一列。我找到了 tutorial实现此目的但将元素按水平顺序放置,而我需要垂直顺序。我看过其他一些输出垂直顺序的教程,但也附上class="first"
和 class="second"
每个 li
这不是我想要的。我希望使用我现有的 HTML 代码。
我想要的:
-01 -06 -11
-02 -07 -12
-03 -08 -13
-04 -09 -14
-05 -10 -15
我有什么:
-01 -02 -03
-04 -05 -06
-07 -08 -09
-10 -11 -12
-13 -14 -15
CSS:
ul {
width:760px;
margin-bottom:20px;
overflow:hidden;
}
li {
float:left;
display:inline;
}
.double li { width:50.0%; } /* 2 col */
.triple li { width:33.3%; } /* 3 col */
.quad li { width:25.0%; } /* 4 col */
.six li { width:16.6%; } /* 6 col */
HTML:
<ul class="triple">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
最佳答案
您可以使用这个 code :
ul
{
-webkit-column-count: 4; -webkit-column-gap:20px;
-moz-column-count:4; -moz-column-gap:20px;
-o-column-count:4; -o-column-gap:20px;
column-count:4; column-gap:20px;
}
但不幸的是,我不确定它是否适用于所有浏览器。你应该试验一下。
这是用来玩它的 jsFiddle:http://jsfiddle.net/leniel/nRL4R/
关于html - 使用单个普通列表自动创建列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12305389/