Я создаю меню навигации. Я хочу использовать css, чтобы тег привязки был обернут вокруг элемента li, но теги привязки находятся внутри элемента li.
Вот html
<ul>
<li><a href="">Uutiset</a></li>
<li><a href="">Foorumi</a></li>
<li><a href="">Kauppa</a></li>
<li><a href="">Messut</a></li>
<li><a href="">Asiakaspalvelu</a></li>
<li><a href="">Nakoislehti</a></li>
<li><a href="">Nae meidat</a></li>
</ul>
вот мой меньше css
ul {
list-style-type: none;
padding: 0;
margin: 0;
li {
padding: 2% 4%;
border: 1px solid green;
a {
text-decoration: none;
display: block;
}
}
}
Единственным правовым элементом, разрешенным внутри <ul>, является <li>. Вы не можете привязать якорь вокруг <li>. Это справедливо в HTML5, где якорь может обертывать другие элементы уровня блока.
То, что у вас есть в CSS, почти есть, просто добавьте:
a {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
И ваш якорь должен заполнить все пространство <li>.
Вы не можете сделать li кликабельным, но то, что вы можете сделать, - это расширение a-link до размера li, как предлагается здесь: fooobar.com/questions/105331/...
Не используйте дополнение в li, вместо line-height используйте текст привязки. Это позволит покрыть всю высоту элемента li.
Вот, посмотрите на Пример
Попробуйте это, дайте padding вместо якоря. Невозможно сохранить за пределами li. Сделайте стиль своего якоря вместо li. Пусть li действует как обертка.
ul {
list-style-type: none;
padding: 0;
margin: 0;
li {
a {
padding: 2% 4%;
border: 1px solid green;
text-decoration: none;
display: block;
}
}
}