Html 将锚标签包裹在 li 元素周围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12086453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
wrap anchor tag around li element
提问by Om3ga
I am creating navigation menu. I want to use css so that anchor tag is wrapped around li element but anchor tags are inside li element.
我正在创建导航菜单。我想使用 css 以便锚标记环绕 li 元素，但锚标记位于 li 元素内。
Here is html
这是 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>
here is my less css
这是我的较少 css
ul {
list-style-type: none;
padding: 0;
margin: 0;
li {
padding: 2% 4%;
border: 1px solid green;
a {
text-decoration: none;
display: block;
}
}
}
回答by Kyle
The only legal element allowed inside a <ul>is an <li>. You cannot have an anchor wrapped around the <li>. This holds true in HTML5, where an anchor can wrap around other block level elements.
在 a 中允许的唯一合法元素<ul>是 an <li>。你不能在<li>. 这适用于 HTML5，其中一个锚点可以环绕其他块级元素。
What you have in CSS is nearly there, just add:
您在 CSS 中的内容几乎就在那里，只需添加：
a {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
And your anchor shall fill the entire space of the <li>.
并且您的锚点将填满<li>.
回答by ygssoni
回答by Silox
You can't make a li clickable, but what you can do is expanding the a-link to the size of the li as suggested here: https://stackoverflow.com/a/1121754/1068495
您不能使 li 可点击，但您可以按照此处的建议将 a-link 扩展到 li 的大小：https: //stackoverflow.com/a/1121754/1068495
回答by Nithin Emmanuel
Try this, give the padding to anchor instead of li. It is not possible to keep outside li. Do style your anchor instead of li. Let li act just like a wrapper.
试试这个，给填充而不是 li 锚定。不可能保持在 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;
}
}
}
