Question

我正在尝试创建一个水平列表，其子列表垂直堆叠，即

A   B   C1   D   E
        C2

这是MWE的小提琴：http://jsfiddle.net/jsx4S/

此处还将包含代码：

<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li>
    <ul>
        <li><a href="#">C1</a></li>
        <li><a href="#">C2</a></li>
    </ul>
</li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>

相关的CSS：

ul
{
list-style: none;
display: inline;
}

li
{
float: left;
width: 100px;
height: 50px;
margin-right: 25px;
}

li a
{
text-decoration: none;
padding: 4px 20px 4px 4px;
color: black;
border: 1px solid;
}

样式似乎在Firefox中运行得很好，但在IE9中，浏览器为C1增加了一个（看似）20像素的随机“偏移”。如何摆脱这种偏移，使C1与父列表项内联？

Answer 1

看起来用户代理样式表

在内部UL上有一些填充

我添加了一条额外的规则来删除它，它似乎有效：

li ul
{
    padding: 0
}

http://jsfiddle.net/jsx4S/2/

同样的事情似乎也发生在父级UL上，它显示在“E”元素上要解决这个问题，只需从父UL中删除填充。

您还可以考虑使用浏览器重置，这可能会自动重置填充，至少在浏览器之间保持一致。

Answer 2

将padding:0;添加到ul并且它已经消失了。 chrome也是如此，它标准为每个ul添加40px的起始填充。您应该研究跨平台重置。例; http://necolas.github.io/normalize.css/

IE 9为嵌套的ul添加了“offset”

2 个答案: