Question

我来到你面前，谦卑地问你的智慧。

在我的工作中，我经常需要将列表放入2列或更多列。我所做的就是以下内容。

HTML

<ul id="mylist">
    <li>Here's a list item</li>
    <li>Here's a list item</li>
    <li>Here's a list item</li>
    <li>Here's a list item</li>
    <li>Here's a list item</li>
    <li>Here's a list item</li>
</ul>

CSS

#mylist { width: 400px; padding: 10px; border: 1px dashed #000; list-style: disc;}
#mylist > li { display: inline-block; width: 40%; max-width: 40%; margin-right: 5%; margin-bottom: 5%;}

由于某些原因，它不会显示子弹。证明：http://jsfiddle.net/cLyebdof/

我总是使用像添加#mylist > li:before { content: "\002022"; text-align: -12px; padding-right: 12px; }和其他垃圾这样的黑客。但是有更好的方法吗？

Answer 1

列计数是要走的路。

小提琴：http://jsfiddle.net/cLyebdof/7/

浏览器支持：http://caniuse.com/#feat=multicolumn（全球约92％的用户）

CSS

#mylist {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    list-style-position: inside;
}

Answer 2

这些项目符号仅显示display: list-item（<li>的默认值）。来自this CSS3草稿的display-list属性将允许您为内联块生成项目符号，但它在任何浏览器中都无法运行;所以你应该使用::before伪元素或Chris Herbert的解决方案column-count。

Answer 3

虽然您应该使用列计数，但很少有黑客可以解决问题。

#mylist {
    width: 400px;
    padding: 10px;
    border: 1px dashed #000;
    overflow: hidden;
}
#mylist > li { 
    float:left;
    width: 40%;
    max-width: 40%;
    margin: 0 2.5% 5%;
    list-style: disc outside none;
}

Answer 4

而不是使用display：inline for li，你可以简单地使用

#mylist > li{
float:left;
}

为什么给出列表项“display：inline-block”会让子弹消失，我可以解决这个问题吗？

4 个答案:

CSS