Протяжение <a> отмечает для заполнения цельный <литий>
Вот простая структура меню:
<ul id="menu">
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">Test</a></li>
</ul>
Я хочу <a> быть расширенным так, чтобы это заполнило все <li>. Я пытался использовать что-то как width: 100%; height: 100% но это не имело никакого эффекта. Как я расширяю тег привязки правильно?
2 ответа
Тег «a» является встроенным элементом уровня. Для элемента встроенного уровня нельзя задавать ширину. Почему? Потому что встроенные элементы уровня предназначены для представления плавного текста, который теоретически может переноситься от одной строки к другой. В таких случаях нет смысла указывать ширину элемента, потому что вы не обязательно знаете, будет ли он переноситься или нет. Чтобы установить его ширину, вы должны изменить его свойство отображения на блок или встроенный блок :
a.wide {
display:block;
}
...
<ul id="menu">
<li><a class="wide" href="javascript:;">Home</a></li>
<li><a class="wide" href="javascript:;">Test</a></li>
</ul>
Если память не изменяет, вы можете установить width на некоторых встроенных элементах уровня в IE6. Но это потому, что IE6 неправильно реализует CSS и хочет вас запутать.
Просто стилизуйте A с помощью display:block;:
ul#menu li a { display: block;}