HTML 文件
<ul>
<li>1</li>
<li>2</li>
</ul>
CSS 文件
ul
{
float:left;
display:inline;
margin:0px 0px 0px 30px;
padding:0px 0px 0px 20px;
}
CSS 中各句的用途：
- float:left 让 ul 浮动起来，虽然本示例中看起来没有什么意思，但实际中会遇到让 ul 浮动的情况。
- display:inline 是为了解决 IE 的一个双倍 margin-left 的 BUG，具体请参见 IE 浮动边界 BUG 延伸探讨。
- margin、padding 这个是为了让 li 前面的引导小黑点显示出来，也为了各浏览器中的兼容性，你可以去掉看看效果。
现在问题来了
郁闷的是，IE 6 中 ul 的左边距远远大于指定的 30px，而其他浏览器中则正常。下图是 IE 6 与其他浏览器中的显示差别。
左边是 IE 6 中显示的，右边是 Chrome 等浏览器中显示的。
如何纠正 IE 6 的问题呢？
解决方法是为 ul 或 li 设置 list-style-position:outside。很奇怪吧，list-style-position 的默认值本来就是 outside，不知道为什么这种情况下 IE 6 非要我们自己去设置一下。
ul
{
float:left;
display:inline;
margin:0px 0px 0px 30px;
padding:0px 0px 0px 20px;
}
li
{
list-style-position:outside;
}
相关阅读
