html - 使用 HTML 和 CSS 设计记分牌

Question

我正在尝试按以下方式设计计分板:

                  0 - 0
               Home - Away

现在这里发生的问题是，如果主队名称的长度更长，它会将 - 推得更远。我希望 - 与上面分数中的 - 保持一致。我的 html 结构如下所示:

      <div className="score">
        <span>0</span>-<span>0</span>
      </div>
      <div className="team">
        <span>{homeName}</span>-<span>{awayName}</span>
      </div>

我尝试将 direction 属性添加到 span 以使用 rtl。我还尝试提供 text-align center 并将 position 属性固定。但它没有用。不确定我是否要去这里。感谢任何帮助

Answer 1

如果你可以添加一个额外的包装器，你可以简单地使用 display:table

.main {
  display: table;
}

.score,
.team {
  display: table-row;
}

span {
  display: table-cell;
}

span:first-child {
  text-align: right;
  padding-right: 10px;
  position: relative;
}

span:last-child {
  text-align: left;
  padding-left: 10px;
}

/*the line between scores*/
span:first-child::before {
  content: "-";
  position: absolute;
  right:-2px;
  top: 0;
}

<div class="main">
  <div class="score">
    <span>0</span><span>0</span>
  </div>
  <div class="team">
    <span>Home</span><span>away</span>
  </div>
</div>
<div class="main">
  <div class="score">
    <span>0</span><span>0</span>
  </div>
  <div class="team">
    <span>Home Home Home</span><span>away</span>
  </div>
</div>