子弹随着CSS3列消失

当我使用CSS3将列表项转换为列时，列表项上的项目符号消失。有什么想法或建议，为什么要纠正它

请参见示例：

---

我认为子弹在那里，但它们被渲染到了观察区域的左侧。尝试：

list-style-position: inside;

---

将

左填充

和负

文本缩进

添加到列表元素似乎可以产生所需的结果：

ul li {
    padding-left: 1em;
    text-indent: -1em;
}
ul {
    list-style: inside disc;
}

或者，在列表元素（而不是列表）中添加一个

左边距

，并在项目符号之外使用

：

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

在这里尝试了第一个答案后，我的列表项溢出到第二行，无法排列。使用
column gap
我能够将第二列移到上面并看到项目符号

资料来源：


.两列{
-webkit列数：2；
-moz列数：2；
列数：2；
-webkit柱间隙：40px；
柱间距：40px；
-moz柱间距：40px；
}
设置
左边距：1em
使项目符号显示时不会弄乱文本缩进。
其他一些解决方案相当不错，但我尝试的所有解决方案都对我造成了各种副作用。我做了一些小的调整，试图让它尽可能接近完美


ul{
列数：2；
}
解决方案{
左边距：-0.6em；
右边距：0.6em；
}
解决方案>*{
左边距：0.6em；
保证金权利：-0.6em；
}
实验组


此解决方案与其他解决方案非常相似。


它不需要你把子弹放进去，所以你可以保持你的左边缘干净，如果你想。


这为我在IE11中修复了它，同时也不会影响Chromium的外观，所以我不必做任何浏览器过滤。


对照组


此解决方案与其他解决方案非常相似。


它不需要你把子弹放进去，所以你可以保持你的左边缘干净，如果你想。


这为我在IE11中修复了它，同时也不会影响Chromium的外观，所以我不必做任何浏览器过滤。

是的，这只是因为您使用的是JSFIDLE，它不能正确显示项目符号。我希望他们能在那里更新他们的CSS。实际上，在我的网站代码中也不起作用。不过，列表样式的位置工作得很好。谢谢你的帮助。安德鲁，很高兴我能帮上忙！这是一个很好的解决方法，但现在第二行文本与第一行保持一致。
左边距：1em
使项目符号在不影响文本缩进的情况下显示。这（建议的第二种解决方案）在我看来，这是一个更好的解决方案，因为当列表项溢出到多行时，文本对齐方式保持不变。我只想说，在调查了数小时后，我的自定义列表图像（pdf图标）在第二列消失的原因，这保存了我的理智。
ul li {
    margin-left: 1em;
}
ul {
    list-style: outside disc;
}

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