Css 背景色沿ul的整个宽度延伸

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

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

---

这将使a元素显示为块元素。

是否需要此功能

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

---

将所选类放在

上，而不是默认情况下内联的

元素上。这意味着它们不建立自己的块，它们只是文本的一部分。您希望它们建立自己的块，因此您应该使用带有适当上下文的

a{display:block；}

。这还允许您向

元素而不是

元素添加填充，使其可单击区域更大，从而更易于使用。

每个人都正确，您的问题是锚定是内联元素，但我认为还值得一提的是，您的列表中也有一个H1。H1不允许存在，应从UL中拉出或放入LI标签中