Html 如何使导航栏中列表项的整个区域可作为链接单击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3074454/
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
How do I make the whole area of a list item in my navigation bar, clickable as a link?
提问by Curyous
I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?
我有一个由无序列表制成的水平导航栏，每个列表项都有很多填充以使其看起来不错，但唯一可用作链接的区域是文本本身。如何让用户单击列表项中的任意位置以激活链接？
#nav {
background-color: #181818;
margin: 0px;
overflow: hidden;
}
#nav img {
float: left;
padding: 5px 10px;
margin-top: auto;
margin-bottom: auto;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0px;
background-color: #181818;
float: left;
}
#nav li {
display: block;
float: left;
padding: 25px 10px;
}
#nav li:hover {
background-color: #785442;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}<div id="nav">
<img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
<ul>
<li><a href="#">One1</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<div>
<h2>Heading</h2>
</div>回答by Stussa
Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block;and apply padding to it.
不要在 'li' 项中放置填充。而是将锚标记设置为display:inline-block;并对其应用填充。
回答by suren
Define your anchor tag css property as:
将您的锚标记 css 属性定义为：
{display:block}
Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.
然后锚点将占据整个列表区域，因此您的单击将在列表旁边的空白区域工作。
回答by Aaron Harun
Make the anchor tag contain the padding rather than the li. This way, it will take up all the area.
使锚标记包含填充而不是li. 这样，它将占据所有区域。
回答by crisis.sheep
Super, super late to this party, but anyway: you can also style the anchor as a flex item. This is particularly useful for dynamically sized/arranged list items.
超级，超级迟到这个派对，但无论如何：你也可以将锚定为弹性项目。这对于动态调整大小/排列的列表项特别有用。
a {
/* This flexbox code stretches the link's clickable
* area to fit its parent block. */
display: flex;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
}
(Caveat: flexboxes are obvs still not well supported. Autoprefixer to the rescue!)
（警告：flexboxes 仍然没有得到很好的支持。Autoprefixer 来救援！）
回答by Sabby62
Use following:
使用以下：
a {
display: list-item;
list-style-type: none;
}
回答by Kieran
Or you could use jQuery:
或者你可以使用 jQuery：
$("li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
回答by dnvtrn
You should use this CSS property and value into your li:
您应该将此 CSS 属性和值用于您的li：
pointer-events:all;
So, you can handle the link with jQuery or JavaScript, or use an atag, but all other tag elements inside the lishould have the CSS property:
因此，您可以使用 jQuery 或 JavaScript 处理链接，或者使用a标签，但 内的所有其他标签元素li都应具有 CSS 属性：
pointer-events:none;
回答by vabi
Just simply apply the below css :
只需简单地应用以下 css ：
<style>
#nav ul li {
display: inline;
}
#nav ul li a {
background: #fff;// custom background
padding: 5px 10px;
}
</style>
回答by hs18
here is how I did it
这是我如何做到的
Make the <a>inline-block and remove the padding from your <li>
制作<a>内联块并从您的<li>
Then you can play with the widthand the heightof the <a>in the <li>
然后，你可以用玩width和height的<a>中<li>
Put the widthto 100%as a start and see how it works
把widthto100%作为开始，看看它是如何工作的
PS:- Get the help of Chrome Developer Tools when changing the heightand width
PS：- 更改height和获取 Chrome 开发者工具的帮助width
回答by Marcello Perri
You can always wrap the whole tag li in with the hiperlink tag Here is my solution:
您始终可以使用 hiperlink 标签将整个标签 li 包裹起来，这是我的解决方案：
#nav {
background-color: #181818;
margin: 0px;
overflow: hidden;
}
#nav img {
float: left;
padding: 5px 10px;
margin-top: auto;
margin-bottom: auto;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0px;
background-color: #181818;
float: left;
}
#nav li {
display: block;
text-align: center;
float: left;
width: 40px;
padding: 25px 10px;
}
#nav li:hover {
background-color: #785442;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}<div id="nav">
<img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
<ul>
<a href="#"><li>One1</li></a>
<a href="#"><li>Two</li></a>
<a href="#"><li>Three</li></a>
<a href="#"><li>Four</li></a>
</ul>
</div>
<div>
<h2>Heading</h2>
</div>