Question

我的网页有一个列表，我希望列表只开始几个像素。问题是，当我设置margin: 0 0 0 0;时，它自然不会做任何事情，但设置margin: 1px 0 0 0 ;会导致它“跳转”许多像素。

<nav>
    <ul>
        <li>Layer This</li>
        <li>And that</li>
        <li>Ooooh</li>
    </ul>
</nav>

CSS

nav {
    background:#f0364f;
}

nav ul  {
    padding:1px 0 0 0; /* THIS IS THE FAULT.  */
}

nav ul li {
    list-style:none;
    margin:20px 0;
    background:#B8C5CD;
    padding:5px;
}

所以，在CSS中，如果你改变了

nav ul  {
    padding:1px 0 0 0; /* THIS IS THE FAULT.  */
}

到

nav ul  {
    padding:0 0 0 0; /* THIS IS RENDERING CORRECTLY BUT, I WANT A PADDING!  */
}

您将看到问题。当填充设置为0时，它按预期工作。为什么添加1个像素会让它跳得太远？

编辑请注意，虽然修复很好，但我更感兴趣的是为什么会出现这种情况（我确信我可以轻松找到一个hack，但我找不到任何信息了解原因）

Answer 1

这是因为当您的<ul>上没有填充时，您的热门列表项的边距会崩溃。当它有填充时，边距被确认。

我从您的问题中假设您在第一个列表项之前不想要任何保证金，您可以轻松地从第一个项目中删除任何保证金：

nav ul li:first-child{
    margin-top:0;
}

JSFiddle

请参阅Margin collapsing

Answer 2

您为margin（子元素）设置了li。为padding（父元素）设置ul时，您已通过margin collapsing。

为第二个margin元素和下一个设置li：

nav ul li + li {
    margin-top: 20px;
}

jsFiddle Demo

Answer 3

我宁愿做下面提到的事情，而不是使用:first-child，因为:first-child可能存在跨浏览器兼容性问题。

<nav>
  <ul>
    <li class="first">Layer This</li>
    <li>And that</li>
    <li>Ooooh</li>
  </ul>
</nav>

nav ul li.first{
 margin-top:0;
}

解决方案基本相同，但基于类而不是:first-child的定位元素可能只会帮助您防止某些跨浏览器问题。

希望这会有所帮助：）

Answer 4

尝试给第一个孩子而不是ul

提供填充

nav ul li.test {
    padding-top:1px;
}

nav ul  {
    padding:0 0 0 0;
}

<nav>
<ul>
    <li class="test">Layer This</li>
    <li>And that</li>
    <li>Ooooh</li>
</ul>
</nav>

使用NAV UL的奇怪填充问题

4 个答案: