html - 如何防止 TD 中的文字与角落的小 logo 重叠

Question

我有一张表格，显示某项锦标赛每年的前 4 名选手。每个 td 都包括team、team_location以及奖牌（金、银和铜）的小图像，以指示团队的位置。

我正在使用float: rightcss 对齐奖牌，但我遇到了一些团队名称与徽标重叠的问题。如何确保徽标不会与中的其他文本重叠td？这是一个带有一些示例的 stackblitz，虽然我无法让图像在 stackblitz 上工作，所以我附上了一个屏幕截图，其中包含我遇到的问题的示例：

https://stackblitz.com/edit/angular-ivy-yysxgw?file=src/app/app.component.css

另一个问题——如何防止徽标偏离Team Canadatd 中的文本中心？

标签： htmlcss

Answer 1

您可以在标签右侧设置填充以td阻止文本到达img标签。并设置负边距以将其移动img到该填充区域。

或者您可以在右侧留下一个额外的填充并将img标签设置为position: absolute并将其放置在该填充区域内。

.medal {
  float: right;
  margin: 0 -25px 0 0;
}

img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.table td,
.table th {
  text-align: center;
  white-space: nowrap;
}

.table td {
  padding-right: 35px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th class="champ_header">Year</th>
      <th class="champ_header">Champion</th>
      <th class="champ_header">Runner Up</th>
      <th class="champ_header">Semi-Finalist</th>
      <th class="champ_header">Semi-Finalist</th>
    </tr>
  </thead>
  <tr align="center">
    <td>2019</td>
    <td><span><img src="https://www.vippng.com/png/full/540-5402602_medal-png-image-background-gold-medal-icon-png.png" class="medal"></span>United States</td>
    <td><span><img src="https://www.vippng.com/png/full/540-5402602_medal-png-image-background-gold-medal-icon-png.png" class="medal"></span>Canadaadadadadaadadadasdasdasdasdasdasdasdasdasdadad</td>
    <td><span><img src="https://www.vippng.com/png/full/540-5402602_medal-png-image-background-gold-medal-icon-png.png" class="medal"></span>Italy</td>
    <td>Japan</td>
  </tr>
</table>