将锚点标签包裹在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

Answer 1

<ul> 标签内唯一合法的元素是 <li>。不能将锚点包裹在 <li> 中。这适用于 HTML5，即使锚点可以将其他块级元素包裹在内。

在 CSS 中你已经接近成功了，只需添加：

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

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

---

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

- Kyle

---

我不同意，但我可能是错的。请看我的回答。 - Ben Alan

在列表项内添加锚点会导致 a11y 的“嵌套交互”问题！？ - singularity

@singularity 我不认为它会有影响。ol/ul 不是交互式控件。DeQue 并没有将其标记为问题。你能提供一个来源吗？ - Ben Alan

Answer 2

不要在 li 中使用填充(padding)，而是使用 line-height 调整锚文本的高度。这将使其覆盖 li 元素的整个高度。

在这里，看一下这个示例。

- ygssoni

Answer 3

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

根据规范：https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element 任何计算值为“list-item”的元素都有一个列表所有者，其确定如下：

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

让祖先成为元素的父级。

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

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

在它周围放置其他标签不应该导致任何问题，包括可访问性方面。只要它在某个级别的ol、ul或menu内部，它就会找到其所有者。这是使整个<li>容器（包括符号或编号）可点击的唯一方法。

<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

Answer 4

你不能让一个li元素可点击，但是你可以像这里建议的那样将a链接扩展到li元素的大小：https://dev59.com/VHNA5IYBdhLWcg3wBpBm#1121754

- Tom Naessens

Answer 5

尝试这个，将填充设置给锚点而不是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;
    }
  }
}

- Nithin Emmanuel