29

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

5 回答 5

58

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

您在 CSS 中所拥有的几乎就在那里，只需添加：

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

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

于 2012-08-23T07:11:54.113 回答
4

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

在这里，看看这个例子

于 2012-08-23T07:18:59.933 回答
2

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

于 2012-08-23T07:12:41.017 回答
1

试试这个，给填充锚而不是 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;
    }
  }
}
于 2012-08-23T07:17:47.873 回答
1

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

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

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

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

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

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

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

在其周围放置其他标签不应出现任何问题，可访问性或其他问题。只要它在某个级别的 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>

于 2022-01-19T15:21:48.137 回答