列表中的项目符号不允许使用空格或边框

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