href锚点宽度始终为0导致内部图片无法显示与点击问题求助

问题原因 #

你当前遇到的a标签宽度为0的问题，核心是父容器.other采用flex布局，作为直接子元素的a标签受flex默认收缩规则影响，即便手动设置了宽度也会被折叠。

修复方案 #

你可以任选以下一种方式修改，都能解决问题：

• 给a标签新增flex-shrink: 0属性，禁止flex容器收缩该子元素，原有宽度设置就会正常生效，修改后的a标签代码为：

<a style="display: inline-block; width: 100%; flex-shrink: 0;" href="#URL">
  <img src="你的图片地址" alt="图片说明">
</a>

• 直接把a标签的display属性从inline-block改为block，flex容器下block类型的子元素宽度设置优先级更高，不会被默认收缩：

<a style="display: block; width: 100%;" href="#URL">
  <img src="你的图片地址" alt="图片说明">
</a>

如果修改后还有显示异常，可以给内部的img标签补充display: block; width: 100%; height: auto属性，确保图片可以正常撑开父级容器。

完整修改后的参考代码 #

CSS部分

.levels{
  background-color: #fff;
  padding: 3%;
  margin-bottom: 20px;
}
.levels_rows{
  display: flex;
  width: 100%;
  flex-direction: row;
}
.global{
  display: flex;
  width: 20%;
  flex-direction: column;
  padding-right: 2%;
}
.other{
  display: flex;
  flex-direction: row;
  width: 25%;
}
/* 可以新增a标签的全局规则避免后续同类问题 */
.other a {
  flex-shrink: 0;
}

HTML部分

<div class="levels">
  <div class="levels_rows">
    <div class="global">
      <p style="font-size:14px; font-weight:900; text-transform:uppercase; margin-bottom: 2%;">Title</p>
      <div class="other">
        <a style="display: block; width: 100%;" href="#URL">
          <img src="你的图片地址" alt="图片说明">
        </a>
      </div>
    </div>
  </div>
</div>

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