css 调整可单击区域的大小

km0tfn4u 于 2022-12-24 发布在其他

关注(0)|答案(3)|浏览(182)

我在如何调整点击区域方面遇到了问题。
详情请参见下文：

正如你可以看到的图像，光标是远离字母的方式，但仍然显示，它仍然是可点击的距离。
下面是我的代码，我只展示其中的几个，以免我搞混。

li {
font-size: 20px;
display: inline;
padding-right: 20px;
border: 0px;
}

ul.list li:nth-child(-n+26) a{
font-size: 15px;
color: red;
display: list-item;
z-index: 1;
text-decoration: none;
right: 0;
left: 0;
top: 0;
bottom: 0;
}

.onclick div:target {
display: block;
}

.onclick div:hover {
background-color: red;
color: white;
}

<nav>
  <div>
    <ul class="list">
      <li><a href="pageA.html">A</a></li>
      <li><a href="pageB.html">B</a></li>
      <li><a href="pageC.html">C</a></li>
      <li><a href="pageD.html">D</a></li>
      <li><a href="pageE.html">E</a></li>
    </ul>
   </div>
  </nav>

我已经试过把它加到多重子风格，子导航和单独的LI风格上，但是都不起作用。

css

来源：https://stackoverflow.com/questions/74879838/resize-clickable-area

3条答案

按热度按时间

0pizxfdo1#

您可以添加标签的"宽度"样式。

ul.list li:nth-child(-n+26) a{
    width: fit-content;
}

希望这对你有帮助。

赞(0）回复(0）举报 2022-12-24

krcsximq2#

这可能会有所帮助：

li {
font-size: 20px;
display: inline;
padding-right: 20px;
border: 0px;
}

ul.list li:nth-child(-n+26) a{
font-size: 15px;
color: red;
display: list-item;
z-index: 1;
text-decoration: none;
position: relative;
margin: 0; border: 0; padding: 0;
float: left;
clear: left;
}

.onclick div:target {
display: block;
}

.onclick div:hover {
background-color: red;
color: white;
}

<nav>
  <div>
  <ul class="list">
    <li><a href="pageA.html">A</a></li>
    <li><a href="pageB.html">B</a></li>
    <li><a href="pageC.html">C</a></li>
    <li><a href="pageD.html">D</a></li>
    <li><a href="pageE.html">E</a></li>
  </ul>
  </div>
</nav>

赞(0）回复(0）举报 2022-12-24

hxzsmxv23#

将display: inline-block添加到您的ul，您的问题将得到修复！

赞(0）回复(0）举报 2022-12-24