如何使整个块可点击？答案

【问题标题】：how to make the whole block clickable?如何使整个块可点击？
【发布时间】：2014-09-18 20:58:51
【问题描述】：

我已经创建了一个导航菜单，但我面临的问题是，当我将鼠标悬停在每个菜单块的边缘时，ancor 标签不起作用，只有当我将鼠标放在文本附近时它才起作用。我的问题是我想让整个块可点击任何解决方案？

这里是fiddle。

标记。

<div id="nav">
    <ul class="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="/work/">Products</a></li>
        <li><a href="/contact/">Careers</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>
</div>

CSS。

#nav {
    width: 960px;
    background: #222222;
}

.menu {
    width: 960px; 
    margin: auto;
    padding: 0;
list-style: none;
text-align: center;
}

.menu li {
    display: block;
    border-right: 5px solid #222222;
    border-bottom: 3px solid #222222;
    padding: 10px;
    float: left; 
    width: 166px;
    height: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    background: #0C5E91;
}

.menu li:hover {
    background: #95d629;
}

.menu li a {
    display: block;
    float: left;
    width: 140px;
    height: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

.menu li a { 
    text-decoration: none;
    color: white;
}

【问题讨论】：

可能重复：stackoverflow.com/questions/3074454/…

标签： html css

【解决方案1】：

将width、height 和padding 添加到</a> 元素，而不是<li>。

http://jsfiddle.net/tv8Dw/2/

【讨论】：

而不是固定高度 % 宽度，使用 100%。喜欢this

【解决方案2】：

$('#nav').click(function(){  alert('clicked'); });

【讨论】：

最好避免使用js，这很简单，只用css就可以解决

【解决方案3】：

将<a href> 放在<li> 之前:) 并在</li> 之后关闭</a>

【讨论】：

这个的问题，它不是语义的，所以不是一个好的做法