Обернуть тег привязки вокруг элемента li

Я создаю меню навигации. Я хочу использовать 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;
    }
  }
}

Ответ 1

Единственным правовым элементом, разрешенным внутри <ul>, является <li>. Вы не можете привязать якорь вокруг <li>. Это справедливо в HTML5, где якорь может обертывать другие элементы уровня блока.

То, что у вас есть в CSS, почти есть, просто добавьте:

a {
     text-decoration: none;
     display: block;
     width: 100%;
     height: 100%;
}

И ваш якорь должен заполнить все пространство <li>.

Ответ 2

Вы не можете сделать li кликабельным, но то, что вы можете сделать, - это расширение a-link до размера li, как предлагается здесь: fooobar.com/questions/105331/...

Ответ 3

Не используйте дополнение в li, вместо line-height используйте текст привязки. Это позволит покрыть всю высоту элемента li.

Вот, посмотрите на Пример

Ответ 4

Попробуйте это, дайте 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;
    }
  }
}