Question

由于某种原因，鼠标光标并未指示此可点击性。它会显示指针，可能是它的一小部分，但我希望整个部分可以点击并且对用户来说很明显。

图标显示正确且看起来不错，但显然无法点击。

<ul class="team-icons">
    <li><a href="/link-url/" class="main-sprite header-icon header-team1"><span style="width:25px;height:25px;"></span></a></li>
            <li><a href="/link-url/" class="main-sprite header-icon header-team2"></a></li>
</ul>

.team-icons li {
 float: left;
 width: 25px;
 height: 25px;
 margin:5px 15px;
}
.header-icon {
width: 25px;
height: 25px;
display:inline-block;
background-size:375px; 
}
.header-team1 {
 background-position: -0 -93.75px;
}
.header-team2 {
 background-position: -25px -93.75px;   
}

Answer 1

将<li>设置为显示内联块，将<a>设置为显示块：

.team-icons li {
  width: 25px;
  height: 25px;
  margin:5px 15px;
  display: inline-block;
}
.header-icon {
  width: 25px;
  height: 25px;
  display: block;
}

这样，链接占用整个空间，列表项仍然是内联的。

修改：如果您正在进行内联阻止，也不需要float: left;中的li。

css background-image nav - 不可点击

1 个答案: