如何实现点击图片或下方文本均跳转至同一URL的效果

解决方案 #

你现有的代码逻辑其实已经走对了方向：把图片和文本都包裹在同一个<a>标签内，本身就可以共享同一个跳转逻辑，只需要调整CSS布局规则、优化HTML规范问题即可实现需求。

调整后的HTML代码 #

<div class="image1">
  <a href="https://www.thisisamadeuplink"> 
    <img src="2.jpeg" width="150" height="200" alt="Made up image name">
    <span>Test to display</span>
  </a>
</div>

HTML优化点：

• 修正了href属性的换行、空格问题，避免链接识别异常
• 给文本套了<span>标签，方便后续单独控制文本的字号、边距等样式

调整后的CSS代码 #

.image1 {
  position: absolute;
  left: 10px;
  top: 200px;
}
.image1 a {
  /* 让a标签内部的图片、文本纵向排列 */
  display: flex;
  flex-direction: column;
  /* 去掉a标签默认的下划线样式 */
  text-decoration: none;
  /* 自定义文本颜色，这里设置为继承父级颜色，也可以单独指定 */
  color: inherit;
}
/* 可选样式：给图片加底部边距，和文本拉开距离 */
.image1 img {
  margin-bottom: 8px;
}

调整完成后，点击图片或下方文本都会触发同一个跳转逻辑，和你提到的新闻卡片交互效果完全一致，不需要设置两个独立链接。

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