Fatal编程技术网
  • html/
  • Html 如何使水平css导航栏之后的元素显示在其下方？

Html 如何使水平css导航栏之后的元素显示在其下方？

html css

Html 如何使水平css导航栏之后的元素显示在其下方？,html,css,Html,Css,我使用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> <

我使用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>
尝试使用
清除：左。然后，这将清除显示在无序列表下方的元素


编辑：应实际阅读
清除：左尽管使用
清除：两者都有也将起作用
使用浮点清除，然后调整标题div的大小并将其定位在其下方。如果您给它的宽度大于导航栏右侧的空间，它将自动下拉

CSS:

导航后的HTML：


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




标题



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



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