css - 水平菜单栏列表下的 anchor 标签及其 block 行为

Question

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

样式表如下。

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

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

我的问题是:为什么我们需要将包含在

标记中的 anchor 的显示属性设置为“阻止”？我了解到 anchor 标记本身自然是内联元素。这是否意味着这样做可以使 anchor 标记能够显示为 block ？那么，我们可以将它们视为设置背景和填充的 block 吗？

如有任何帮助，我们将不胜感激。

Answer 1

添加display:block到 <a>元素不是强制性的，但它的一个优点是如果您指定一个元素(特别是高度)，它将采用其父元素的完整尺寸(<li>)。

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