0

マークアップをそのまま実行すると、<li>要素は要素内にありません<ul>。display:block;しかし、このスタイルをに追加すると#nav a、完全な#nav a宣言は次のようになり、<li>要素は 内にあります<ul>。

#nav a {
  display:block;
  margin:0;
  padding:8px 16px;
  color:#333;
  text-decoration:none;
  border:1px solid #9B8748;
  border-bottom:none;
  background:#F9E9A9;
 }

に追加したときに<li>要素が 内にある理由を誰か説明できますか?<ul>display:block#nav a

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   body {
      font-family:Arial, sans-serif;
      font-size:small;
      width:720px;
      margin:0;
      padding:0;
   }
   #nav {
       float:left;
       width:100%;
       margin:0;
       padding:10px 0 0 46px;
       list-style:none;
       background:#FFCB2D;
   }
   #nav li {
      float:left;
      margin:0 1px 0 0;
      padding:0;
      font-family:"Lucida Grande", "sans-serif";
      font-size:90%;
   }
   #nav a {
      /* display:block;*/
       margin:0;
       padding:8px 16px;
       color:#333;
       text-decoration:none;
       border:1px solid #9B8748;
       border-bottom:none;
       background:#F9E9A9;
   }
   #nav a:hover {
       color:#333;
       padding-bottom:5px;
       border-color:#727377;
       background:#fff;
   }
</style>

<meta charset="utf-8" />
<title>Chapter 3</title>
</head>
<body>
 <ul id="nav">
  <li id="t-intro"><a href="/">Introduction</a></li>
  <li id="t-about"><a href="about.html">About Lance</a></li>
  <li id="t-news"><a href="news.html">News &amp; Events</a></li>
  <li id="t-sponsors"><a href="sponsors.html">Sponsors</a></li>
 </ul> 
</body>
</html>
4

3 に答える 3

0

を追加しないとdisplay: block、a要素は として扱われdisplay: inlineます。そのため、親のサイズを計算する場合 (heightデフォルトはauto)、padding要素のaは省略されますが、 の場合は含まれdisplay: blockます。

于 2013-08-06T21:57:04.357 に答える
0

左側に #nav 要素をフローティングしているため、すべての<li>要素がそのコンテナーの外側に表示されます。overflow: hidden;CSS をクリーンアップするためにできることは他にもあるかもしれませんが、手始めに #nav に追加してみてください。

于 2013-08-06T21:53:02.377 に答える