Css 水平菜单栏列表下的锚定标记及其块行为

我对CSS相当陌生。我一直在研究如何通过给定的示例使用CSS设置水平菜单。html源代码如下所示：

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

所有这些代码都完美地显示了水平菜单，但我不太了解它是如何组织的

我的问题是：为什么我们需要将

标记中包含的锚的display属性设置为“block”？我了解到锚标记本身是内联元素。这是否意味着这样做会使锚定标记能够显示为块？所以，我想我们可以把它们当作背景和填充的块

---

非常感谢您的帮助。

在

元素中添加

display:block

，这并不是一种改进，但它的一个优点是，如果您指定一个（特别是高度），它将占用其父元素的全部大小（

）

---

此外，由于您正在将背景应用于链接，因此将其显示为块总是一件好事，因为大多数时候您需要指定高度。

将

display:block

添加到

元素并不是一种改进，但它的一个优点是它将占用其父元素的全部大小（

）如果指定一个（特别是高度）

此外，由于要将背景应用于链接，因此最好将其显示为块，因为大多数情况下需要指定高度

    body {
      background-color: #000;
    }

    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
      background-image: url(navi_bg.png);
      height: 80px;
      width: 663px;
      margin: auto;
    }

    li {
      float: left;
    }

    ul a {
      background-image: url(navi_bg_divider.png);
      background-repeat: no-repeat;
      background-position: right;
      padding-right: 32px;
      padding-left: 32px;
      display: block;
      line-height: 80px;
      text-decoration: none;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 21px;
      color: #371C1C;
    }

    ul a:hover {
      color: #FFF;
    }