如何让头部导航栏中被li标签包裹的a标签可点击

故障根因&修复方案 #

常见原因1：父级li元素未设置明确宽高 #

你给a标签设置了width:100%、height:100%，但父元素.link没有指定宽高，导致a标签的实际渲染尺寸为0，自然无法触发点击。
修复方法：给.link添加明确的宽高值，或者直接取消a标签的百分比宽高，改为由内容撑开：

/* 修改后的CSS示例 */
.header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999; /* 调大z-index避免被其他元素覆盖 */
}
.links {
  display: flex;
  list-style-type: none;
  padding: 0.5em;
  margin: 0;
}
.link {
  margin: 0.5em;
  /* 给li设置明确宽高，适配内部图标尺寸即可 */
  width: 40px;
  height: 40px;
}
.network-link {
  margin: 0;
  padding: 0.4em;
  display: block;
  cursor: pointer;
}
/* 新增：避免图标拦截点击事件 */
.social-link {
  display: block;
  width: 100%;
  pointer-events: none; /* 让点击事件透传给父级a标签 */
}

常见原因2：header层级太低被其他元素覆盖 #

如果页面其他内容的z-index大于header的z-index值，就会盖在导航上方拦截点击，把.header的z-index调整到999这类更高的值即可解决。

常见原因3：JS事件拦截跳转 #

检查全局JS有没有给ul、li或者a标签绑定了点击事件，并且执行了preventDefault()或者return false阻止了默认跳转行为，对应删除相关逻辑即可。

常见原因4：图标资源加载失败 #

如果本地svg图标加载失败，img没有实际渲染尺寸，也会导致a标签没有可点击区域，可先给img加上固定宽高验证问题。

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