背景颜色在ul的整个宽度上延伸

Question

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

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

当我为所选类添加背景颜色时，只有文本获得颜色，我希望它能够拉伸该部分的整个距离。

希望这是有道理的。

Answer 1

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

或者，您可以将其添加到选定的类'CSS：

display: block;

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

Answer 2

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

Answer 3

这样的事情会起作用吗？

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

Answer 4

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

Answer 5

默认情况下，

<a>个元素是内联的。这意味着它们不会建立自己的块，它们只是文本的一部分。您希望它们建立自己的块，因此您应该将a { display: block; }与适当的上下文一起使用。这也使您可以向<a>元素而不是<li>元素添加填充，从而使其可点击区域更大，从而更易于使用。