我有一个用于水平菜单的简单列表：

<ul>
    <h1>Menu</h1>
    <li>
      <a href="/" class="selected">Home</a>
    </li>
    <li>
      <a href="/Home">Forum</a>
    </li>
</ul>

当我将背景色添加到选定的类时，只有文本才获得该颜色，我希望它可以拉伸该部分的整个距离。

希望这是有道理的。

解决方案

a元素是一个内联元素，这意味着它仅适用于其包含的文本。如果希望背景颜色水平延伸，请将选定的类应用于块级元素。将类应用于li元素应该可以正常工作。

或者，我们可以将其添加到所选类的CSS中：

display: block;

这将使一个元素显示为块元素。

这样的事情会起作用吗？

.selected {
    display: block;
    width: 100%;
    background: #BEBEBE;
}

将选定的类放在<li>上，而不是<a>

默认情况下，<a>元素是内联的。这意味着它们不会建立自己的块，它们只是文本的一部分。我们希望他们建立自己的块，因此应使用a {display：block; }和适当的上下文。这也使我们能够向<a>元素而不是<li>元素添加填充，从而使它们的可点击区域更大，从而更易于使用。

每个人都是正确的，问题是锚点是内联元素，但我想也值得一提的是，列表中也有一个H1. 禁止在此处使用H1，应将其从UL中拉出或者放入LI标签中。