Question

我试图让我的div包含浮动元素，放大以包含它们，但它似乎没有注意元素的填充，有效地将它们切掉。如何让div成为列表项的正确高度？

HTML：

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
  </head>

  <body>
    <div class="nav">
      <ul class="nav">
        <li class="nav"><a class="nav" href="#">One1</a></li>
        <li class="nav"><a class="nav" href="#">Two</a></li>
        <li class="nav"><a class="nav" href="#">Three</a></li>
        <li class="nav"><a class="nav" href="#">Four</a></li>
      </ul>
    </div>

    <div class="after"><h2>Heading</h2></div>
  </body>
</html>

的CSS：

ul.nav, ul li.nav {
  display: inline;
  margin: 0px;
  padding: 0px;
}

ul.nav {
  list-style-type: none;
}

li.nav {
  display: block;
  float: left;
  background-color: red;
}

a.nav {
  background-color: green;
  padding: 10px;
  margin: 0;
}

a:hover.nav {
  background-color: gray;
}

div.nav {
  background-color: blue;
  overflow: hidden;
  width: 100%;
}

div.after {
  clear: left;
}

Answer 1

如果您正在讨论垂直填充，则锚点是内联元素，并且没有垂直尺寸。只需设置a.nav{display:inline-block;}即可获得一些垂直填充。

Answer 2

我不确定overflow:hidden是否适用于漂浮的孙子孙女。我建议删除display:inline上的ul（是否存在特定原因？）并在overflow:hidden而不是ul上设置div 1}}。

使ul和内联元素中包含浮动块级元素必然会导致问题，因为我认为这不是有效的。

顺便说一下，确实没有必要给所有元素一个类;如果包含div已经有一个类，您可以将其子项定位为：

.nav ul {
}
.nav li {
}
// etc.

Answer 3

我的方向与edl相同：a，作为内联元素，没有垂直填充。

但是，IE 7到IE 7的效果不适用于display: inline-block（请参阅http://www.quirksmode.org/css/display.html），因此我建议您将链接设置为display: block。您的列表项已经浮动，因此没有任何区别。

在相关说明中，我还建议您更改标记和样式表以提高清晰度和可读性：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Title</title> 

    <link type="text/css" rel="stylesheet" href="/stylesheets/test.css">
  </head>

  <body>
    <ul id="nav">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>

    <h2>Heading</h2>
  </body>
</html>

和

#nav {
  background-color: blue;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

#nav li {
  background-color: red;
  float: left;
}

#nav li a {
  background-color: green;
  display: block;
  padding: 10px;
}

#nav li a:hover {
  background-color: gray;
}

并非每个元素都需要一个类，并且基于它们的标记为不同目的使用相同的名称只会引起很多人的头痛。只需给主元素一个ID，并让你的规则来自那里。

这样，你也可以摆脱不必要的div，简化你的标记。

Div溢出：隐藏不清除浮动无序列表的填充

3 个答案: