如何将CSS背景图与金额文本分别绑定至不同URL并保持同行显示？

别担心，这个问题其实很容易搞定～你现在的核心痛点是把作为背景图的图标变成可点击的独立链接，同时还要和金额链接保持在同一行。咱们只需要调整HTML结构，再配合简单的CSS布局就能实现需求。

步骤1：重构HTML结构 #

把图标和金额拆成两个独立的<a>标签，这样就能给它们分别设置不同的跳转链接：

<div class="player-credit-info">
  <!-- 图标跳转链接 -->
  <a href="#player/deposit/" class="credit-icon-link"></a>
  <!-- 金额跳转链接 -->
  <a href="#player/wallet/" class="credit-amount-link">
    <div id="playerBalance">10000$</div>
  </a>
</div>

步骤2：调整CSS样式 #

把原来父容器的背景图样式移到图标链接上，再用Flex布局让两个元素在同一行垂直对齐：

.player-credit-info {
  float: right;
  margin-top: 8px;
  font-size: 18px;
  /* 用Flex实现同行垂直居中 */
  display: flex;
  align-items: center;
  gap: 10px; /* 图标和金额之间的间距，可根据需求调整 */
  padding: 0 15px; /* 保留原有左右内边距 */
}

.credit-icon-link {
  display: inline-block;
  width: 25px;
  height: 22px;
  background: url(../images-vm/coin@2x.png) no-repeat;
  background-size: 100% 100%; /* 让图标填满容器 */
  /* 可选：添加hover效果提升交互感 */
  cursor: pointer;
}

.credit-amount-link {
  color: inherit; /* 继承父元素文字颜色，保持原有样式 */
  text-decoration: none; /* 去掉链接下划线，不需要可以删掉 */
}

替代方案：不用Flex的话 #

如果你不想用Flex布局，也可以给两个<a>标签都设置inline-block和垂直对齐：

.player-credit-info {
  float: right;
  margin-top: 8px;
  font-size: 18px;
  padding: 0 15px;
}

.credit-icon-link {
  display: inline-block;
  width: 25px;
  height: 22px;
  background: url(../images-vm/coin@2x.png) no-repeat;
  background-size: 100% 100%;
  vertical-align: middle; /* 和金额垂直居中对齐 */
  margin-right: 10px; /* 图标和金额的间距 */
  cursor: pointer;
}

.credit-amount-link {
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  text-decoration: none;
}

这样调整后，图标和金额就分别对应了不同的跳转链接，而且能完美保持在同一行显示，布局也和你原来的效果一致～

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