在 li 元素周围包裹锚标记答案

【问题标题】：wrap anchor tag around li element在 li 元素周围包裹锚标记
【发布时间】：2012-08-18 15:55:18
【问题描述】：

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

这是我的less css

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

【问题讨论】：

标签： html css

【解决方案1】：

<ul> 中唯一允许的合法元素是 <li>。你不能在<li> 周围有一个锚。在 HTML5 中也是如此，其中锚点可以环绕其他块级元素。

你在 CSS 中的内容差不多了，只需添加：

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

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

【讨论】：

【解决方案2】：

不要在 li 中使用填充，而是使用 line-height 作为锚文本。这将使它覆盖li 元素的整个高度。

来看看这个Example

【讨论】：

【解决方案3】：

您无法使 li 可点击，但您可以按照此处的建议将 a-link 扩展为 li 的大小：https://stackoverflow.com/a/1121754/1068495

【讨论】：

【解决方案4】：

试试这个，给锚定填充而不是 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;
    }
  }
}

【讨论】：