CSS列讓我的LI子彈消失

Question

我如何讓我的以外的列表子彈回來？

http://jsfiddle.net/mblase75/s9FVT/

.two-column-list { 
    padding-left: 1.4em; 
    list-style: outside disc; 
    -webkit-columns: 2; 
    -moz-columns: 2; 
    columns: 2; 
} 
.two-column-list li { 
    -webkit-column-break-inside: avoid; 
    -moz-column-break-inside: avoid; 
    column-break-inside: avoid; 
} 

當我用outside disc子彈無序列表上的CSS列，我的子彈消失，不管列表元素的填充。

I can get them back by using inside disc，但隨後我的長線包裹在子彈之下，我也想避免。

向<li>元素添加否定的text-indent也不起作用;它只是裁剪了前幾個字母。

我正在使用最新版本的Chrome。 Firefox似乎不受影響。

Answer 1

添加兩個padding-left和負text-indent到列表中的元素，同時使列表本身list-style: inside disc，似乎解決了問題：

.two-column-list { 
    padding: 0 0.4em; 
    list-style: inside disc; 
    -webkit-columns: 2; 
    -moz-columns: 2; 
    columns: 2; 
} 
.two-column-list li { 
    padding-left: 1em; 
    text-indent: -1em; 
} 

http://jsfiddle.net/mblase75/s9FVT/6/

Answer 2

您可以ul元素上使用list-style-position: inside：

.two-column-list { 
    /* all the other stuff */ 
    list-style-position: inside; 
} 

JS Fiddle demo或on所述li元素：

.two-column-list li { 
    /* all the other stuff */ 
    list-style-position: inside; 
} 

（JS Fiddle demo）。

或者你可以簡單地分配margin-left到li元素：

.two-column-list li { 
    /* all the other stuff */ 
    margin-left: 1em; 
} 

JS Fiddle demo）。