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

<ul>内允许的唯一合法元素是<li>。你不能在<li>周围放置一个锚点。这在HTML5中也适用，其中锚可以包围其他块级元素。

CSS中的内容几乎就在那里，只需添加：

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

你的锚将填满<li>的整个空间。

Answer 2

请勿在{{1}}中使用填充，而是使用li作为锚文本。这将使其覆盖line-height元素的全高。

在这里，看一下这个Example

Answer 3

你无法点击可点击，但你可以做的是将a-link扩展为li的大小，如下所示：https://stackoverflow.com/a/1121754/1068495

Answer 4

试试这个，给padding而不是li。李不可能留在外面。做你的锚而不是李。让我的行为就像一个包装。

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  li {
    a {
        padding: 2% 4%;
        border: 1px solid green;
        text-decoration: none;
        display: block;
    }
  }
}

在li元素周围包裹锚标记

4 个答案: