子弹与CSS3列一起消失

Question

当我使用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-leftlist 添加到list元素(而不是列表)并使用项目outside符号:

ul li {
    margin-left: 1em;
}
ul {
    list-style: outside disc;
}

http://jsfiddle.net/mblase75/gduDm/9/