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，然后我的长线包裹在子弹下，我也想避免。

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

我正在使用最新版本的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

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

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

JS Fiddle demo或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）。