我试图在Firefox(我使用的是40.0.3)中解决了一个问题，其中使用-moz-column-count和display：table使列表显示为一列。这是我的例子和
jsfiddle：
div {
-webkit-column-count: 2; /* Chrome,Safari,Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
ul {
display: table;
margin: 0 auto;
}
<div>
<ul>
<li>abcd</li>
<li>b</li>
<li>cdefg</li>
<li>d</li>
</ul>
</div>
我正在使用display：table将div列中心。在Edge，IE10和Chrome中，列表分为两列。
我的问题是如何通过Firefox中的display：table获得两列，或者如何正确地列出列表，使其在所有浏览器中都可以使用。
解决方法
实际上，我认为Chrome和IE是错误的。他们会给你想要的，但是他们不应该像FF一样。
在你的代码中，你会说’split-div-in-2-columns，但是基本上你只需要一个ul。当你将ul分成两部分(见片段)，那么FF就像预期一样工作，和CHB和IE BTW一样。
如果我创建了你的代码，我实际上只会想到一个列，即一个ul的li(或一个p的p，一个span的等等)。第二个ul将是第二列(第二个div …等)。所以我的结论是Chrome和IE搞砸了。
我讨厌这样的意外行为，让人不确定哪个浏览器是正确的。
以下是更正后的代码：
div {
-webkit-column-count: 2; /* Chrome,Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2; /* demo code */
}
ul {
display: table;
margin: 0 auto;
}
<div>
<ul>
<li>abcd</li>
<li>b</li>
</ul>
<ul>
<li>cdefg</li>
<li>d</li>
</ul>
</div>
– 更新演示代码 –
另外一些演示代码片段如何使用它没有一个表。只需将你的代码删除表的东西，并将列计数移动到ul。
这也是一样：
ul,li {
list-style-type: none; padding: 0;
}
div {
width: 500px; /* just some width */
border: 2px dashed silver;
margin: 0 auto; /* center in body */
}
ul {
-webkit-column-count: 2; /* Chrome,Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
margin: 0 auto; /* center in div */
}
li {
border: 1px dotted red;
}
<div>
<ul>
<li>abcd</li>
<li>b</li>
<li>cdefg</li>
<li>d</li>
</ul>
</div>
