0

如何取回我的外部列表项目符号？

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;
}

当我在带有项目符号的无序列表上使用 CSS 列时outside disc，无论列表元素上的填充如何，我的项目符号都会消失。

我可以使用 来取回它们inside disc，但是我的长线会包裹在项目符号下，我也想避免这种情况。

text-indent向元素添加负数<li>也不起作用；它只是剪掉前几个字母。

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

4

2 回答 2

4

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

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

JS Fiddle 演示或关于li元素：

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

（JS Fiddle 演示）。

或者您可以简单地将 a 分配margin-left给li元素：

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

JS 小提琴演示）。

于 2013-02-20T20:21:14.067 回答
4

在制作列表本身的同时，向列表元素添加padding-left一个负数，似乎可以解决问题：text-indentlist-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/

于 2013-02-20T20:17:06.567 回答