消失的子弹与CSS3列(Bullets disappear with CSS3 columns)

当我将它们转换为使用CSS3列在我的列表项子弹消失。 如何纠正任何想法，为什么或建议？

见例如： 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;
}

文章来源: Bullets disappear with CSS3 columns