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

您将 #nav 元素浮动在左侧，因此所有<li>元素都将出现在该容器之外。尝试添加overflow: hidden;到您的 #nav 以供初学者使用，尽管可能还有更多工作可以清理您的 CSS。

于 2013-08-06T21:53:02.377 回答
0

如果不添加display: block，a元素将被视为display: inline。因此，在计算父元素的大小时（height默认为auto），padding元素a的 被省略，而在 的情况下包含display: block。

于 2013-08-06T21:57:04.357 回答
0

我更新你的代码...

请参阅以下http://jsfiddle.net/LUzbR/

HTML

<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>

CSS

 body
   {
      font-family:Arial, sans-serif;
      font-size:small;
      width:720px;
      margin:0px;
      padding:0px;
   }

   #nav
   {
       float:left;
       width:100%;
       margin: 0px;
       padding:10px 0px 0px 46px;
       display: block;
       list-style:none;
       background:#FFCB2D;
   }

   #nav li
   {
      float:left;
      display: block;
      margin:0 1px 0 0;
      padding:0;
      font-family:"Lucida Grande", "sans-serif";
      font-size:90%;
   }

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


   #nav a:hover
   {
       color:#333;
       padding-bottom:5px;
       border-color:#727377;
       background:#fff;
   }
于 2013-08-06T22:07:28.537 回答