子弹消失与CSS3列

当我将它们转换为使用CSS3的列时，我列表项目上的项目符号消失。 任何想法为什么或build议如何纠正？

看例子： http : //jsfiddle.net/gduDm/1/

ul li { list-style-type: disc !important; column-break-inside: avoid; } ul { list-style-type: disc !important; margin-top: 1em; column-count: 2; column-gap: 0.5em; } 

Answer 1

我认为子弹在那里，但是它们被渲染到观看区域的左侧。 尝试：

 list-style-position: inside; 

Answer 2

在列表元素中添加padding-left和负面的text-indent似乎会产生所需的结果：

 ul li { padding-left: 1em; text-indent: -1em; } ul { list-style: inside disc; } 

http://jsfiddle.net/mblase75/gduDm/4/

或者，向列表元素（而不是列表）添加一个margin-left ，并使用outside符号：

 ul li { margin-left: 1em; } ul { list-style: outside disc; } 

http://jsfiddle.net/mblase75/gduDm/9/

Answer 3

设置页margin-left:1em使得项目符号不会与文本缩进混淆。

Answer 4

在尝试第一个答案后，我遇到了问题，我的列表项溢出到第二行，而不是排队。 使用column-gap我能够移动第二列，看到子弹。

资料来源： http : //karlikdesign.com/how-to-split-a-list-into-two-columns-with-pure-css/

  <!– CSS CODE –> .two-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 40px; column-gap: 40px; -moz-column-gap: 40px; }