在 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>

这是我的 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;
    }
  }
}

原文由 Om3ga 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<ul> 中唯一允许的合法元素是 <li> 。您不能在 <li> 周围缠绕锚点。这在 HTML5 中也适用，其中锚点可以环绕其他块级元素。

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

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

您的锚点应填满 <li> 的整个空间。

---

2022 年更新：用 anchors 包裹你的 li 标签现在是完全可以接受的。

原文由 Kyle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 2022 年撰写本文时，在列表项周围放置锚标签或任何标签是完全有效的。尽管这可能被认为是不寻常或不好的做法。

来自规范： https ://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element

‘display’ 的计算值为 ‘list-item’ 的任何元素都有一个列表所有者，其确定如下：

如果该元素未被渲染，则返回 null；该元素没有列表所有者。

让 ancestor 成为元素的父级。

如果元素具有 ol、ul 或 menu 祖先，则将祖先设置为最接近的此类祖先元素。

标签的“所有者”不是由它的直接父级决定的，而是由最近的 ol、ul 或 menu 祖先决定的。

在其周围放置其他标签不会出现任何问题，无论是可访问性还是其他方面。只要它在某个级别的 ol、ul 或菜单中，它就会找到它的所有者。这是使整个

容器（包括项目符号或数字）可点击的唯一方法。

 <ol>
  <li>
    <a href="example.com/1">This is fine.</a>
   </li>
  <a href="example.com/2">
    <li>This link is the entire container.</li>
  </a>
  <a href="example.com/3">
    <div>
      <div>
        <div>
          <li>This has four parents before the &lt;ol.&gt</li>
        </div>
      </div>
    </div>
  </a>
</ol>

原文由 Ben Alan 发布，翻译遵循 CC BY-SA 4.0 许可协议