将anchor tag 包裹在li元素周围

Question

我正在创建导航菜单。我想使用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;
    }
  }
}

Answer 1

在a内唯一允许使用的法律元素<ul>是<li>。您无法在周围包裹锚点<li>。这在HTML5中是正确的，HTML5中的锚点可以环绕其他块级元素。

您在CSS中所拥有的几乎已经存在，只需添加：

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

并且您的锚将填满船的全部空间<li>。