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属性放入跨度以使用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>

Answer 2

您可以执行类似的操作，但是总有许多其他方式可以根据需要进行样式设置。

<div class="main">
  <div class="home-screen">
     <p> 0 </p>
     <p> Home </p>
  </div>
  <div> - <div>
  <div class="away-screen">
     <p> 0 </p>
     <p> Away </p>
  </div>
</div>

style.css

.main {
  display: flex;
  flex-direction: row;
}

Answer 3

将团队的得分和姓名放在单独的div标签中。
为主队的得分和主队的名字提供相同的宽度值，并在右边text-align给他们

HTML

<div class="score">
  <div class="home">0</div>-<div class="away">0</div>
</div>
<div class="team">
  <div class="home">home name</div>-<div class="away">away name</div>
</div>

CSS

.home{
  width: 55%;
  display: inline-block;
  text-align: right;  
}

.away{
  display: inline-block;  
}

查看here

使用HTML和CSS的记分板设计

3 个答案: