Question

如果我现在运行标记，<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>

Answer 1

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

Answer 2

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

Answer 3

我更新你的代码......

请参阅以下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;
   }

为什么我需要显示：块

3 个答案: