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

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> 标签的高度为 41px，但<a> 标签除了字体大小外没有任何高度。默认情况下<a> 标签显示inline，因此您的可点击区域只占用<a> 标签字体大小的空间。修复它的方法太多了。

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

通过将高度和宽度赋予<a> 标签作为容器：

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

第二个选项：

通过调整<a> 填充。无需为li 标签指定高度如果它对 UI 不重要。

#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 2

我很惊讶这些按钮能正常工作。当您定义 <li> 的大小时，没有定义 <a> 的任何内容，因此理论上它的大小应该为 0，因此不可点击。

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

Answer 3

如果您在链接中添加一个 41px 的 CSS 高度，则可以解决此问题。