Question

我正在使用css无序列表创建网站导航栏，使用display: inline，display: block和float: left。我放在导航栏后面的下一个元素放在它的右边。如何对齐下一个元素以便它显示在下面？

html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

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

  <body>
    <div>
      <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><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: 0px;
}

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

Answer 1

尝试在列表后面的div上使用clear: left;。然后，这应该清除要显示在无序列表下方的元素。

编辑：实际应该阅读clear: left;，尽管使用clear: both;也可以使用

Answer 2

使用浮动清除然后调整大小并将标题div放在其下方。如果您给它的宽度大于导航栏右侧的空间，它应该会自动下拉。

CSS：

.clear { clear:both; }
#heading { position:relative; margin:0px auto; width:980px; }

导航后的

HTML：

<div class="clear"></div>    
<div id="heading">Heading</div>

如何在水平css导航栏下方显示该元素？

2 个答案: