代码之家 › 专栏 › 技术社区 › Pranay Tripathi

使用HTML和CSS设计记分板

css html

Pranay Tripathi · 技术社区 · 7 年前

                  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 固定资产。但它不起作用。我不知道我是不是要去这里。谢谢你的帮助

3 回复 | 直到 7 年前

Temani Afif 7 年前

如果您可以添加一个额外的包装器,那么只需使用 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>

saidutt 7 年前

你可以这样做,但你总是有很多其他的方式来设计你需要的风格。

<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>

样式表

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前