-1

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>

[スタイル.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;
}

スタイルとインデックスのコードを追加しました。

4

4 に答える 4

0

Chrome を使用して、各要素を右クリックし、[要素の検査] を選択します。「メトリクス」まで下にスクロールします。これにより、各要素の見かけの幅に影響を与えるその他のプロパティ (マージン、ボーダー、パディング、ボックスモデル、および配置) が表示されます。

于 2013-02-24T07:12:36.460 に答える
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 に答える
0

ナビゲーション バーの長さは、リスト内の個々の箇条書きによって決まります。持っているところwidth: 150px;は、それぞれの個体の長さを示していますli。それらすべてを合わせた長さが、ナビゲーション バーの長さになります。display: inline-block;の下に追加し#navMenu ul liて、元の幅に依存させます。

于 2013-02-24T07:34:37.213 に答える