HTML：垂直对齐进度栏

Question

我有一个带有进度条的项目列表：

我想要的是所有进度条都对齐，无论左边的文本有多长。 （我已经知道左侧最长的文字将持续多长时间）
代码段（在Django中）：

<strong style="font-family:Arial">{{ score.0 }}</strong>
<progress value="{{ score.1 }}" max="10" style="margin-left: 5%"></progress>

style="margin-left: 5%"不起作用，因为它相对于相应的文本。我已经尝试使用“垂直对齐”变体，但没有任何效果。

Answer 1

这取决于您要如何处理它，一种方法是通过css为所有文本赋予相同的长度，例如：

<strong style="width:200px;">text goes here</strong>
<progress></progress>

另一种方法是将<strong>和<progress>都放在一个容器中，进行各种包装，然后给该容器一些伸缩规则，使两个元素都指向相反的方向这样结束：

<div class="container">
<strong>text</strong>
<progress></progress>
</div><!-- .container -->

and for the css

.container {
display:flex;
width:100%;
flex-direction:row;
justify-content:space-between;
align-items:center;
}

strong {width:200px;} // or 50%;
progress (width:200px;} //or 50% or whatever you need

Answer 2

您在这里使用flex：

section {
  font-family: sans-serif;
  display: flex;
  flex-wrap: wrap;
}

strong, progress {
  flex-basis: 50%
}

<section>
  <strong>text</strong>
  <progress value="1" max="10"></progress>
  <br>
  <strong>longer text</strong>
  <progress value="1" max="10"></progress>
  <br>
  <strong>even longer text</strong>
  <progress value="1" max="10"></progress>
</section>

Answer 3

可以通过两行CSS实现。

而且，下面给出的是示例HTML结构FYR。

strong{
  display: inline-block;
  min-width: 250px;
}

<strong style="font-family:Arial">Text</strong>
<progress value="3" max="10" style="margin-left: 5%"></progress>
<strong style="font-family:Arial">Longer Text</strong>
<progress value="3" max="10" style="margin-left: 5%"></progress>
<strong style="font-family:Arial">Even Longer Text</strong>
<progress value="3" max="10" style="margin-left: 5%"></progress>