Цвет фона растягивается на всю ширину ул

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

<a> элементы встроены по умолчанию. Это означает, что они не устанавливают свой собственный блок, они просто являются частью текста. Вы хотите, чтобы они установили свой собственный блок, поэтому вы должны использовать a { display: block; } с соответствующим контекстом. Это также позволяет добавлять отступы к элементам <a>, а не к элементам <li>, увеличивая их интерактивную область и тем самым облегчая использование.

Answer 5

Поместите выбранный класс в <li>, а не в <a>