css - CSS列使我的LI子弹消失

This question already has answers here:

Bullets disappear with CSS3 columns

                                    （5个答案）


                                6年前关闭。


如何获得外部清单的项目符号？

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似乎不受影响。

最佳答案

在列表元素中同时添加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/

Disc

css - CSS列使我的LI子弹消失