css - 列表中的项目符号不允许空白或边框

Question

如何在列表中的项目之间创建空白边框？我尝试这样做，但子弹之间没有空格：另外，我内联编写 css，因为它是用于时事通讯的。

<ul style="color: white;background:#e2000b;">
    <li><b>38%</b></li>
    <li style="border-top:5px white solid;"><b>Free</b></li>
</ul>

谢谢。

http://jsfiddle.net/4EAq3/

Answer 1

这个怎么样：http:
//jsfiddle.net/4EAq3/8/

我用过list-style-position:inside就行了。

Answer 2

您可以使用伪元素来显示列表元素之间的空白。不要使用内联样式。

<ul style="color: white;background:#e2000b;">
    <li><b>38%</b></li>
    <li style="border-top:5px white solid;position:relative;"><b>Free</b><div style="position:absolute;top:-5px;left:-40px;width:40px;height:5px;background:#fff;"></div></li>
</ul>

JSFiddle