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

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

我的问题是：为什么我们需要设置＆lt; li＆gt;中包含的锚点的显示属性。标记为“阻止”？我了解到锚标签本身就是内联元素。这是否意味着这样做会使锚标记能够显示为块？那么，我可以将它们视为设置背景和填充中的块吗？

非常感谢任何帮助。

Answer 1

将display:block添加到<a>元素是不可取的，但它的一个优点是，如果您指定一个（<li>），它将占用其父级的完整大小（特别是高度）。

此外，由于您将背景应用于链接，因此将其显示为块始终是一件好事，因为大多数情况下您需要指定高度。

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

1 个答案: