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

这是我较少的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

在a里面允许的唯一合法元素<ul>是<li>.你不能把锚子缠绕在上面<li>.这在HTML5中也适用,其中锚可以包围其他块级元素.

你在CSS中拥有的几乎就是那里,只需添加:

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

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

Answer 2

更新：

除了 <li> 是 <ol> 或 <ul> 的直接后代之外，你不应该有任何东西。https://dequeuniversity.com/rules/axe/4.7/list?application=AxeChrome 这是一个可访问性问题。

请忽略以下意见：

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

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

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

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

让祖先成为该元素的父元素。

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

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

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