Question

我有一个1000px的div;和导航栏也是1000px;但它没有扩展到div那么多。

请帮忙......

[index.html的]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>[phantzm]</title>
<link rel="stylesheet" type="text/css" href="style.css">
<center>
<div class="banner">
<IMG SRC="logo.png" class="logo" WIDTH=100 HEIGHT=100 ALT="pZ">
</div>
<center>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>
<a href="#">fun stuff</a>
<ul>
<li><a href="#">jokes</a></li>
<li><a href="#">riddles</a></li>
<li><a href="#">facts</a></li>
</ul><!-- end of Second List -->
<li>
<a href="#">   my work   </a>
</li>
<li>
<a href="#">   my favourite songs   </a>
</li>
<li>
<a href="#">   my favourite links   </a>
</li>
<li>
<a href="#">   about me   </a>
</li>
<li>
<a href="#">   contact me   </a>
<ul>
<li><a href="#">phone</a></li>
<li><a href="#">e-mail</a></li>
<li><a href="#">mail</a></li>
</ul><!-- end of Second List -->
</li>
</li><!-- end of List Item -->
</ul><!-- end of Unordered List -->
</div><!-- end of navMenu div -->
</div><!-- end of wrapper div-->
</center>
</head>
<body bgcolor="#FFCECE">
</body>
</html>

[style.css文件]

body {
    background: SILVER;
    margin: 0;
    padding: 0 auto;
}

.banner {
   background: blue;
   width: 1000px;
   height: 70px;
}
.logo {
   margin-top: 10px;
   margin-right: 500px;
}

#navMenu {
   margin: 0;
   padding: 0;
   line-height: 30px;
   width: 1000px;
}

#navMenu ul {
   margin: 0;
   padding: 0;
   border: 1px white;
}

#navMenu li:hover {
    font-weight:normal;
    text-transform: capitalize;
    background:silver;
}

#navMenu ul li {
   margin: 0;
   padding: 0;
   list-style:none;
   float: left;
   position: relative;
   background: #4B8EE0;
   border: 1px white;
   border-left: 1px solid #0000ff;
    border-right: 1px solid #000ff;

}

#navMenu ul: hover {
   text-transform: capitalize;

}

#navMenu ul li a {
   text-align: center;
   font-family: "Arial";
   text-decoration: none;
   height: 30px;
   width: 150px;
   display: block;
   color: white;
}

#navMenu ul ul {
   position: absolute;
   visibility: hidden;
   top:30px;
   border: 1px white;
}

#navMenu ul li:hover ul {
   visibility: visible;
}

我添加了样式和索引的代码..正如你可以看到横幅和navmenu都有1000px;

Answer 1

使用Chrome，右键单击每个元素，然后选择“检查元素”。向下滚动到“Metrics”。这将显示其他属性影响每个元素的表观宽度（边距，边框，填充，框模型和定位）。

Answer 2

导航不是1000px，因为每个项目都设置为固定宽度

您应该使用百分比更改每个项目的宽度，因此每个项目的宽度相对于1000px和项目数量

但是，如果它仍然不起作用，您应该在<div style="clear:both;"></div>

的底部添加<ul></ul>

Answer 3

导航栏的长度由列表中的每个项目符号点决定。你有width: 150px;的地方显示了每个人li的长度。所有这些的长度一起为您提供导航栏的长度。您可以在display: inline-block;下添加#navMenu ul li，使其取决于原始宽度。

Answer 4

只需改变你的CSS：Live Demo

#navMenu ul li {
   margin: 0;
   padding: 0;
   list-style:none;
   float: left;
   position: relative;
   background: #4B8EE0;
   border: 1px white;
   border-left: 1px solid #0000ff;
    border-right: 1px solid #000ff;
    width:165.6px;
}

165.6是（1000 - 5）/ 6（大约）

如何在CSS中扩展导航

4 个答案: