Question

这是我的HTML我试图使我的按钮完全可点击但我认为它不起作用。链接仅在按钮文本上启用。我已经尝试了一切，但找不到解决方案。

HTML

<nav id="nav">
    <ul>
        <li>
            <span class="nav-icon icon-home"></span>
            <a href="index.html">Home</a>
        </li>
        <li class="current-menu-item">
            <span class="nav-icon icon-user"></span>
            <a href="about.html">About Us</a>            
        </li>
    </ul>
</nav>

CSS

#nav-container{
    float: left;
    width:  100%;
    z-index: 900;
    position: relative; 
    height: 65px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #fafafa 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#fafafa)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#fafafa 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#fafafa 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#fafafa 100%); /* W3C */
}

#nav-container select{
    display: none;
}

#nav-container .grid_12{
    margin-bottom: 0;
}

#nav{
    height: 100%;
    width: 730px;
    margin-right: 20px;
    list-style: none;
    float: left;
}

.nav-icon{
    color: #444;
    font-size: 14px;
    margin-bottom: 3px;
    text-align: center;
    display: block !important;
    width: 100%;
}

#nav > ul{
    display: block !important;
}

#nav li{
    float: left;
    position: relative;
    cursor: pointer;

}

#nav > ul > li{
    padding: 15px 20px;
    height: 65px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    border-right: 1px solid #e8e8e8;
}

#nav > ul > li:first-child{
    border-left: 1px solid #e8e8e8;
}

#nav li a{
    float: left;
    font: 12px 'Open Sans', Arial, sans-serif;
    color: #333;
}

#nav > ul > li.current-menu-item a, 
#nav > ul > li.current-menu-item span,
#nav > ul > li:hover span, 
#nav > ul > li:hover a{
    color: #fff;
}
#nav > ul > li a:hover{
    color: #fff !important;
}

#nav > ul > li.current-menu-item, 
#nav > ul > li:hover, {
    background-color: #d52b2a !important;
}

Answer 1

将此属性添加到您的css类

#nav li a{display:block;}

Answer 2

最佳猜测（没有看到代码）是您的链接（a标记）位于列表项（li标记内）。导航的可点击部分（a标签）应该应用填充（并且可能也会因应用display: block而受益）。这样，文本周围的“死空间”也可以点击。

Answer 3

使用

display:inline-block;
padding: 15px 20px;

在#nav li a

中

并且您也可以从#nav > ul > li移除高度并将其提供给a标记。

我的网站按钮无法完全点击

3 个答案: