Question

我有一系列进度条，每个进度条都带有名称，我希望它们垂直对齐，以便进度条从每一行的相同位置开始。我可以使用表来执行此操作，但执行此操作的首选方法是什么。

<div><label for="pb0">Processing</label><progress id="pb0" value="0" max="200"></progress><br>
        <label for="pb1">Songs loaded</label><progress id="pb1" value="0" max="200"></progress><br>
        <label for="pb3">Songs ignored because already matched</label><progress id="pb3" value="0" max="200"></progress><br>
        <label for="pb13">Songs updated from Naim metadata </label><progress id="pb13" value="0" max="200"></progress><br>
        <label for="pb4">Songs matched to MusicBrainz release</label><progress id="pb4" value="0" max="200"></progress><br>
        <label for="pb5">Songs matched to MusicBrainz song only</label><progress id="pb5" value="0" max="200"></progress><br>
        <label for="pb14">Songs matched to Acoustid song only</label><progress id="pb14" value="0" max="200"></progress><br>
        <label for="pb7">Songs matched with artwork</label><progress id="pb7" value="0" max="200"></progress><br>
        <label for="pb17">Songs matched to AcousticBrainz</label><progress id="pb17" value="0" max="200"></progress><br>
        <label for="pb8">Songs saved (if not preview)</label><progress id="pb8" value="0" max="200"></progress><br>
        <label for="pb11">Completed</label><progress id="pb11" value="0" max="200"></progress><br>
        <label for="pb12">Errors</label><progress id="pb12" value="0" max="200"></progress><br>
        </div>

Answer 1

使用float:right和margin-right与您想要的位置保持一致。

progress{
  float: right;
  margin-right: 50px;
}

<div>
<label for="pb0">Processing</label><progress id="pb0" value="0" max="200"></progress><br>
    <label for="pb1">Songs loaded</label><progress id="pb1" value="0" max="200"></progress><br>
    <label for="pb3">Songs ignored because already matched</label><progress id="pb3" value="0" max="200"></progress><br>
    <label for="pb13">Songs updated from Naim metadata </label><progress id="pb13" value="0" max="200"></progress><br>
    ...
</div>

或者，您可以使用您的标签：

label{
  width: 100px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
<label for="pb0">Processing</label><progress id="pb0" value="0" max="200"></progress><br>
    <label for="pb1">Songs loaded</label><progress id="pb1" value="0" max="200"></progress><br>
    <label for="pb3">Songs ignored because already matched</label><progress id="pb3" value="0" max="200"></progress><br>
    <label for="pb13">Songs updated from Naim metadata </label><progress id="pb13" value="0" max="200"></progress><br>
    ...
</div>

并且，不切割文本（只为标签设置一个最小宽度）：

label{
  width: 200px;
  display: inline-block;
}

<div>
<label for="pb0">Processing</label><progress id="pb0" value="0" max="200"></progress><br>
    <label for="pb1">Songs loaded</label><progress id="pb1" value="0" max="200"></progress><br>
    <label for="pb3">Songs ignored because already matched</label><progress id="pb3" value="0" max="200"></progress><br>
    <label for="pb13">Songs updated from Naim metadata </label><progress id="pb13" value="0" max="200"></progress><br>
    ...
</div>

或者，您可以使用display: flex：

div{
  display: flex;
  width: 100%;
}

label, progress{
  flex: 1;
}

<div>
  <label for="pb0">Processing</label><progress id="pb0" value="0" max="200"></progress>
</div>
<div>
  <label for="pb1">Songs loaded</label><progress id="pb1" value="0" max="200"></progress>
</div>
<div>
  <label for="pb3">Songs ignored because already matched</label><progress id="pb3" value="0" max="200"></progress>
</div>
<div>
  <label for="pb13">Songs updated from Naim metadata </label><progress id="pb13" value="0" max="200"></progress>
</div>
    ...

Answer 2

您可以旋转它：

Webkit：-webkit-transform：rotate（90deg）;

FireFox：-moz-transform：rotate（90deg）;

IE：filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 1）;

Answer 3

您可以根据需要为标签指定宽度。

＆＃13;

label{
  width:50%;
  display:inline-block;
}

＆＃13;

<div><label for="pb0">Processing</label><progress id="pb0" value="0" max="200"></progress><br>
        <label for="pb1">Songs loaded</label><progress id="pb1" value="0" max="200"></progress><br>
        <label for="pb3">Songs ignored because already matched</label><progress id="pb3" value="0" max="200"></progress><br>
        <label for="pb13">Songs updated from Naim metadata </label><progress id="pb13" value="0" max="200"></progress><br>
        <label for="pb4">Songs matched to MusicBrainz release</label><progress id="pb4" value="0" max="200"></progress><br>
        <label for="pb5">Songs matched to MusicBrainz song only</label><progress id="pb5" value="0" max="200"></progress><br>
        <label for="pb14">Songs matched to Acoustid song only</label><progress id="pb14" value="0" max="200"></progress><br>
        <label for="pb7">Songs matched with artwork</label><progress id="pb7" value="0" max="200"></progress><br>
        <label for="pb17">Songs matched to AcousticBrainz</label><progress id="pb17" value="0" max="200"></progress><br>
        <label for="pb8">Songs saved (if not preview)</label><progress id="pb8" value="0" max="200"></progress><br>
        <label for="pb11">Completed</label><progress id="pb11" value="0" max="200"></progress><br>
        <label for="pb12">Errors</label><progress id="pb12" value="0" max="200"></progress><br>
        </div>

＆＃13;

Answer 4

只需添加一条规则css，

progress { float: right;}

如何垂直对齐这些Html 5进度条？

4 个答案: