求助：如何调整网页链接的可点击区域？

问题根源 #

你给<a>标签设置了display: list-item，同时添加了right: 0;left: 0;top: 0;bottom: 0但未设置定位属性，这两个操作共同导致链接的可点击区域被错误拉伸，出现光标离文字很远仍可点击的情况。display: list-item会让<a>生成类似列表项的块级结构，默认占据横向整行空间，进一步扩大了点击范围。

修复方案 #

修改CSS中链接的样式，移除错误属性，用合理方式控制点击区域：

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

ul.list li:nth-child(-n+26) a {
  font-size: 15px;
  color: red;
  z-index: 1;
  text-decoration: none;
  /* 可选：用padding调整点击区域大小，按需设置 */
  padding: 3px 6px;
}

.onclick div:target {
  display: block;
}

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

关键修改点说明 #

• 移除display: list-item：你的<li>已经是inline布局，<a>不需要再设置为列表项，避免生成多余的块级空间。
• 删除right: 0;left: 0;top: 0;bottom: 0：这些属性只有在元素设置了position: absolute/fixed/relative时才生效，无定位时只会干扰浏览器的尺寸计算。
• 用padding控制点击区域：如果需要扩大链接的点击范围，通过设置padding来实现，既能保证点击区域贴合文字周边，又不会出现失控的超大点击范围。

内容的提问来源于stack exchange，提问作者Gnarlyeah