背景颜色跨越整个 ul 的宽度

Question

我有一个简单的列表，用于制作横向菜单：

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

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

希望这样说清楚了。

- public static

Answer 1

a 元素是行内元素，意味着它只适用于它包含的文本。如果您想要背景颜色横跨整个宽度，请将所选类应用于块级元素。将类应用于 li 元素应该可行。

或者，您可以将以下内容添加到所选类的 CSS 中：

display: block;

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

- jdp

Answer 2

大家都说你的问题在于锚点是行内元素，但是我认为还值得一提的是，你的列表中还有一个H1。H1不允许在那里，应该将其从UL中拿出来或放到LI标签中。

- Prestaul

Answer 3

这个有用吗？

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

- joshhunt

Answer 4

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

- Oli

Answer 5

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

- Jim