-1

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

请帮忙...

[索引.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>

[样式.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;
}

我已经添加了样式和索引的代码。你可以看到横幅和导航菜单都有 1000px；

4

4 回答 4

0

使用 Chrome，右键单击每个元素并选择“检查元素”。向下滚动到“指标”。这将向您展示哪些其他属性正在影响每个元素的表观宽度（边距、边框、填充、框模型和定位）。

于 2013-02-24T07:12:36.460 回答
0

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

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

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

于 2013-02-24T07:30:09.117 回答
0

导航栏的长度由列表中的每个单独的项目符号点决定。你在哪里width: 150px;显示了每个人的长度li。所有这些的长度加起来就是导航栏的长度。您在display: inline-block;下添加#navMenu ul li以使其取决于原始宽度。

于 2013-02-24T07:34:37.213 回答
0

只需像这样更改您的 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（大约）

于 2013-02-24T08:01:05.180 回答