为什么按钮只能在上半部分点击？

Question

您可以在此处转到我的测试页：https://socialstamp.me.uk/new/testpage.php

左侧的按钮（欠平衡），只有上半部分可以点击，下半部分不工作/点击。我已经检查了CSS样式文件但无法找到任何内容，我尝试了很多解决方案，但没有任何效果。

按钮代码：

             <ul>
             <li id="l2"><a href="dashboard.php"></a></li>
             <li id="l3"><a href="trackingPanel.php"></a></li>
             <li id="l4"><a href="topup.php"></a></li>
             <li id="l5"><a href="contactform.php"></a></li>
             <li id="l6"><a href="accountSettings.php"></a></li>
             <li id="l7"><a href="apiHelp.php"></a></li>
             <li id="l8"><a href="referrals.php"></a></li>  
             </ul>

CSS：

#dashContainer .col-md-2 li {
display:block; 
height: 40px;
margin-bottom: 1px;
margin-left: 15px;
margin-right: 0;
}

#l2 {
   background-image: url('../img/menu/btn3.jpg');
}
#l2:hover {

background-image: url('../img/menu/btn3h.jpg');
}
#l2:active {

background-image: url('../img/menu/btn3h.jpg');
}

And so on for several buttons...

Answer 1

我很惊讶按钮的工作原理。在定义<li>的大小时，没有定义<a>的内容，所以理论上它应该是0，因此不可点击。

确保将宽度和高度应用于链接本身！

Answer 2

问题是<li>标记的高度为41px，但<a>标记除了font-size之外没有任何高度。默认情况下，<a>标记显示inline，因此您的可点击区域占用的空间为<a>标记字体大小。修复它的方法太多了。

第一个选项：（原始答案）

将<a>标签的高度和宽度设为容器：

 #dashContainer .col-md-2 li a {
    display:block;
    height:100%;
    width:100%;
 }

第二个选项：

通过调整<a>填充。如果对于用户界面不重要，则无需为li代码提供高度。

#dashContainer .col-md-2 li {
   display:block; 
   /* height: 40px; */
   margin-bottom: 1px;
   margin-left: 15px;
   margin-right: 0;
}
#dashContainer .col-md-2 li a {
   padding:20px 0px;
}

第三个选项：

为<a>代码提供高度。

#dashContainer .col-md-2 li {
   display:block; 
   /* height: 40px; */
   margin-bottom: 1px;
   margin-left: 15px;
   margin-right: 0;
}
#dashContainer .col-md-2 li a {
   display:block;
   height:40px;
   line-height:40px; // for text vertical align
   width:100%;
}

Answer 3

如果您要在链接中添加css height 41px，则可以解决此问题。