摆脱列表样式类型和文本之间的边界

Question

嗯，这就是html代码：

<ul>
  <li>first item</li>
  <li>second item</li>
</ul>

和css：

ul, li { margin: 0px; padding: 0px; }

没什么特别的，对吗？没有什么值得骄傲的，它只是显示一个没有任何边距或填充的列表。好吧，差不多......

http://i46.tinypic.com/wmhwmv.jpg

那里的空间怎么样？我似乎无法摆脱它。有任何想法吗？ ：

Answer 1

如果你想删除text和bullet之间的空格，你需要稍微更改一下HTML代码：

<ul>
  <li><span>first item</span></li>
  <li><span>second item</span></li>
</ul>

通过给li一个相对位置和跨度绝对位置，你可以将跨度移到左边：

li {
    position: relative;
}

li span {
    position: absolute;
    left: 0;
}

Answer 2

你可以破解它以使其正常工作，但也许你可能想要考虑删除列表样式并使用<li>上的背景代替，就像你可以完全控制它一样。

关于此的一个很好的参考：http://www.alistapart.com/articles/taminglists/

W3Schools：http://www.w3schools.com/Css/css_list.asp

Answer 3

实现这一目标的唯一可靠的跨浏览器方式是完全放弃子弹并使用li上的背景图像。这适用于所有主流浏览器（甚至IE5和Netscape 7.1），并且不需要对HTML本身进行任何更改。有关优秀指南，请参阅Listamatic。