从上到下的多列HTML列表

Question

内嵌HTML列表在浏览器中显示如下

item1    item2    item3    item4    item5    ...

我们可以使用HTML和CSS

来实现这样的目标吗？

item1    item6    item11
item2    item7    ...
item3    item8
item4    item9
item5    item10

Answer 1

使用columns属性：

ul {
    list-style: none;
    columns:100px 3;
    -webkit-columns:100px 3; /* Safari and Chrome */
    -moz-columns:100px 3; /* Firefox */
}

这是你的demo

如果您不关心订单，更兼容的方法是使用li宽度的百分比：

li {
    display: inline-block;
    min-width: 25%;
    margin-right: 5%;
}

此代码的演示here

Answer 2

尝试使用相同的方法，对于第一个ul内的列使用ul＆gt; li代表行

 <ul>

   <li>
     <ul>
       <li>first item first column</li>
       <li>second item first column</li>
     </ul>
   </li>

   <li>
     <ul>
        <li>first item second column</li>
        <li>second item second column</li>
     </ul>
   </li>

 </ul>

你需要一些css技巧

 ul ul > li{float:left;}