背景颜色在整个宽度上延伸 [英] Background color stretches accross entire width of ul

问题描述

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

I have a simple list I am using for a horizontal menu:

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

当我为所选类添加背景颜色时，只有文本获得颜色，

When I add a background color to the selected class, only the text gets the color, I want it to stretch the entire distance of the section.

推荐答案

a元素是一个内联元素，这意味着它只适用于它所包含的文本。如果您希望背景颜色横向伸展，请将所选类应用于块级元素。

The a element is an inline element, meaning it only applies to the text it encloses. If you want the background color to stretch across horizontally, apply the selected class to a block level element. Applying the class to the li element should work fine.

或者，您可以将它添加到所选类的CSS：

Alternatively, you could add this to the selected class' CSS:

display: block;

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

Which will make the a element display like a block element.

这篇关于背景颜色在整个宽度上延伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！