Background color stretches accross entire width of ul

Question

Hi, 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.

Hope this makes sense.

Answer 1

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.

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

display: block;

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

Answer 2

Would something like this work?

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

Answer 3

Put the selected class on the <li> and not the <a>

Answer 4

<a> elements are inline by default. This means that they don't establish their own block, they are just part of the text. You want them to establish their own block, so you should use a { display: block; } with an appropriate context. This also enables you to add padding to the <a> elements rather than the <li> elements, making their clickable area larger, and thus easier to use.

Answer 5

Everyone is correct that your problem is that anchors are inline elements, but I thought it is also worth mentioning that you have an H1 inside of your list as well. The H1 isn't allowed there and should be pulled out of the UL or placed into an LI tag.