Цвет фона растягивается на всю ширину ul
У меня есть простой список, который я использую для горизонтального меню:
<ul>
<h1>Menu</h1>
<li>
<a href = "/" class = "selected">Home</a>
</li>
<li>
<a href = "/Home">Forum</a>
</li>
</ul>
Когда я добавляю цвет фона к выбранному классу, цвет получает только текст, я хочу, чтобы он растягивал все расстояние раздела.
Надеюсь, это имеет смысл.
Ответы 5
Элемент a является встроенным, что означает, что он применяется только к тексту, который он включает. Если вы хотите, чтобы цвет фона растягивался по горизонтали, примените выбранный класс к элементу уровня блока. Применение класса к элементу li должно работать нормально.
В качестве альтернативы вы можете добавить это в CSS выбранного класса:
display: block;
В результате элемент a будет отображаться как блочный.
Хотелось бы, чтобы это работало?
.selected {
display: block;
width: 100%;
background: #BEBEBE;
}
Поместите выбранный класс на <li>, а не на <a>
Элементы <a> по умолчанию встроены. Это означает, что они не устанавливают свой собственный блок, они просто часть текста. Вы хотите, чтобы они установили свой собственный блок, поэтому вам следует использовать a { display: block; } с соответствующим контекстом. Это также позволяет добавлять отступы к элементам <a>, а не к элементам <li>, увеличивая их интерактивную область и, таким образом, упрощая использование.
Все правы, что ваша проблема в том, что якоря являются встроенными элементами, но я подумал, что также стоит упомянуть, что у вас также есть H1 внутри вашего списка. H1 здесь не допускается, и его следует вытащить из UL или поместить в тег LI.