如何在导航栏中创建列表项的整个区域，可作为链接点击？ [英] How do I make the whole area of a list item in my navigation bar, clickable as a link?
本文介绍了如何在导航栏中创建列表项的整个区域，可作为链接点击？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个水平导航栏从无序列表，每个列表项有很多填充，使它看起来不错，但唯一的区域，作为一个链接是文本本身。如何让用户点击列表项中的任意位置以激活链接？
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?
html：
<html>
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
<link rel="shortcut icon" href="/images/favicon.ico" >
</head>
<body>
<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>
</body>
</html>
css：
#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;
}
推荐答案
'li'项目。而是将锚标记设置为 display：inline-block; 并应用填充。
Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.
这篇关于如何在导航栏中创建列表项的整个区域，可作为链接点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
