网页中链接超出所属div宽度撑满整个容器该如何解决？

问题根因 #

仅为a标签设置display:inline-block无法实现填满父div的效果，反而出现异常拉伸的核心原因有两个：

• inline-block元素的默认宽高由内部内容撑开，不会自动继承父级容器的宽高，无法主动填满父div
• 若包裹4个div的外层容器使用了flex/grid布局，默认的align-items: stretch规则会让未做尺寸约束的子元素沿交叉轴方向拉伸，最终导致a标签被拉伸到整个外层容器的尺寸，出现整块区域都可点击的异常。

修复方案 #

方案1：无额外嵌套的最优实现（代码更简洁） #

不需要额外加div包裹，直接调整a标签的CSS规则即可：

• 将a标签的display属性修改为display:block，同时显式指定宽高继承父div的尺寸：

div > a {
  display: block;
  width: 100%;
  height: 100%;
  /* 如果父div设置了内边距，添加以下属性避免a标签溢出父容器 */
  box-sizing: border-box;
}

• 若父div是flex/grid布局的子项，额外给a标签添加对齐规则，避免受父级布局的默认拉伸规则影响：

/* 父div的CSS */
.parent-container {
  display: flex;
}
/* 子div内a标签的CSS */
.parent-container > div > a {
  align-self: stretch;
}

方案2：外层嵌套div方案（你已采用的可行方案） #

该方案适合需要在父div内同时放置其他非链接元素的场景，注意满足两个规则即可保证效果正常：

• 嵌套的中间div需要设置width: 100%; height: 100%，完全填满外层的父div
• 给内部的a标签设置display: block; width: 100%; height: 100%，完全填满中间的嵌套div

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