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

<ul>中唯一允许的合法元素是<li>。不能将锚点包裹在<li>上。这在HTML5中是正确的，锚可以包裹在其他块级元素周围。

你在CSS中所拥有的就快到了，只需添加：

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

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

---

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

Answer 2

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

在这里，我们来看看这个示例

Answer 3

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

根据规格：https://html.spec.whatwg.org/multipage/grouping-content.html#the-li元素

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

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

让祖先是元素的父元素。

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

"；所有者；<李>标签不是由其直接父项决定的，而是由最接近的ol、ul或菜单祖先决定的。

在它周围放置其他标签不会产生任何问题，无论是可访问性还是其他问题。只要它在某个级别的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>

Answer 4

您不能使li可点击，但您可以按照此处的建议将a链接扩展到li的大小：https://stackoverflow.com/a/1121754/1068495

Answer 5

试试这个，把填充物给anchor而不是li。不可能保持在li之外。一定要用你的anchor来代替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;
    }
  }
}