2

我对水平导航栏有疑问。我想创建一个带有图像作为标题（高度：100px）、水平导航栏，最后是内容区域（高度：768px）的页面。我想知道为什么导航栏会放在内容区域中（这意味着内容区域会小于 768px）。我怎样才能避免这种行为？相反，我想将内容区域向下移动大约导航栏的大小。

这是我的 CSS 代码：

* {
         margin:0;
         padding:0;
}

body {
         background:#FFFFFF;
}

#frame {
         margin: auto;
         width: 1024px;
         height: 768px;
}

#header {
         width:100%;
         height:100px;
         background-image:url(image.jpg);
}

#navigation {
         width: 100%;
         float: left;
         list-style: none;
         background: #f2f2f2;
}

#navigation li {
         list-style: none;
         display: inline;
         float: left;
}

#navigation a {
         display: block;
         padding: 8px 15px;
         text-decoration: none;
         font-weight: bold;
         color: #069;
         border-right: 1px solid #ccc;
}

#navigation a:hover {
         color: #c00;
         background-color: #fff;
}

#content {
    background: #EBF7FF;
    width: 1024px;
    height:768px;       
    text-align: justify;
}

这是html代码：

<html>
<head>
<title>test</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div id="frame">

<div id="header">

</div>

 <ul id="navigation">
          <li><a href="main.html" target="_self">text1</a></li>
          <li><a href="text2.html">text2</a>
          <li><a href="text3.html">text3</a></li>
          <li><a href="text4.html">text4</a></li>          
 </ul>


<div id="content">

<font size="+3">Title</font>

<br>
<br>

Content...

<br>
<br>

</div>

</div>

</body>
</html>
4

5 回答 5

1

如果您希望#navigation 显示为浮动，您可以将 clear:both 添加到您的#content。

#content {
   background: #EBF7FF;
   width: 1024px;
   height:768px;       
   text-align: justify;
   clear:both;
}

但在我看来，更好的解决方案是将其显示为块，将 li 显示为内联块，或者将其显示为表格，将 li 显示为表格单元

于 2012-12-09T12:35:00.427 回答
0

您为 #navigation 指定 100% 的宽度，它包含在包含内容的容器 #frame 中。因此，#navigation 采用其容器的宽度，因此与该容器内的其余内容的宽度相同，因为容器恰好采用内部内容所需的宽度。

您将该导航放置在内容容器中，因此显然它必须在其中占据空间。如果您想避免这种情况，只需将导航放在内容容器上方：

<html>
<head>
<title>test</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div id="header">
    <ul id="navigation">
          <li><a href="main.html" target="_self">text1</a></li>
          <li><a href="text2.html">text2</a>
          <li><a href="text3.html">text3</a></li>
          <li><a href="text4.html">text4</a></li>          
    </ul>
</div>

<div id="frame">
  <div id="content">
  <font size="+3">Title</font>
    <br>
    Content...
  </div>
</div>

</body>
</html>​

比较那个提琴手。

于 2012-12-09T12:13:35.420 回答
0

您的导航必须占据整个可用空间，并且将高度设置为 value.setdisplay:table以供您的导航使用，因此它的高度会增长到它的内容，如下所示：

#navigation{
   display:table;
}

检查演示

于 2012-12-09T12:23:29.347 回答
0

那是因为#navigation它漂浮在#content.

尝试添加它以强制#content在导航下方呈现：

#content {
    clear:both;
}
于 2012-12-09T12:44:32.733 回答
0

当您这样做时，您不必担心导航后会发生什么。 

#navigation:after {
   clear:both;
}
于 2012-12-09T14:52:53.893 回答