小编典典

将anchor tag 包裹在li元素周围

css

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

阅读 270

收藏
2020-05-16

共1个答案

小编典典

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

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

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

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

2020-05-16