html - 对齐不同宽度的单词

Question

我知道这听起来像是一个愚蠢的问题，但我脑袋放屁，想不出一个简单的解决方案。我一直在想表格，我真的不想走那条路。

我有一个旁边有等待时间的人的名单。我现在必须将他们的“状态”贴在该人旁边。这不是问题，但是我很强制症，而且状态不完全一致的事实让我非常烦恼。

我已经包含了我正在尝试做的事情的片段。我试过漂浮和其他一些技巧，但我似乎无法使它们平衡。

我不能做的一件事是更改 html。我有这种方式，所以我可以插入 html block ，但我无法重构该代码。

.waitlist {
  width: 40%;
}

.waitlist .panel-body {
  padding: 0;
  border: 2px solid light-gray;
  border-top: none;
  border-bottom-left-radius: .4em;
  border-bottom-right-radius: .4em;
}

.waitlist .panel-body h4 {
  line-height: .5em;
  text-align: left;
  padding: .4em 0;
}

.waitlist .order {
  padding-left: .5em;
}

.waitlist .EstWaitTime {
  float: right;
  padding-right: .5em;
}

<div class="waitlist">
  <div class="panel panel-default">
    <div class="panel-heading" style="color: rgb(255, 255, 255); background-color: rgb(204, 0, 0);">
      <h3 class="panel-title" style="font-size: 1.25em;">
<span>Wait time:</span>
<span class="pull-right">4 hr 0 min</span>

</h3>
    </div>
    <p class="clearfix"></p>
    <div class="panel-body clearfix">

      <!-- ko foreach: WaitList -->

      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order" >1.</span>
<span class="name">tes, e</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">Next</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>

      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">2.</span>
<span class="name">fdg, 3</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">25 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">3.</span>
<span class="name">fdg, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">50 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">4.</span>
<span class="name">gdf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 5 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">5.</span>
<span class="name">dsf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 30 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">6.</span>
<span class="name">gf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 55 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">7.</span>
<span class="name">thi, d</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">2 hr 20 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">8.</span>
<span class="name">fds, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">2 hr 45 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">9.</span>
<span class="name">rtr, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">3 hr 10 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">10.</span>
<span class="name">tss, g</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">3 hr 35 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>
      <!-- /ko -->

    </div>
    <div class="disclamier panel-footer" style="font-family: sans-serif;">
      <p>Wait times are approximate. Actual wait time may vary.</p>
    </div>
  </div>
</div>

Answer 1

你可以简单地给前面的每个元素一个固定的宽度，虽然我不知道使用表格有什么问题；这看起来像是表格数据。

具体来说:

.order {
  display: inline-block;
  width: 1.5em;
}

.name {
  display: inline-block;
  width: 3em;
}

---

.waitlist {
  width: 40%;
}
.waitlist .panel-body {
  padding: 0;
  border: 2px solid light-gray;
  border-top: none;
  border-bottom-left-radius: .4em;
  border-bottom-right-radius: .4em;
}
.waitlist .panel-body h4 {
  line-height: .5em;
  text-align: left;
  padding: .4em 0;
}
.waitlist .order {
  padding-left: .5em;
  display: inline-block;
  width: 1.5em;
}
.waitlist .EstWaitTime {
  float: right;
  padding-right: .5em;
}
.waitlist .name {
  display: inline-block;
  width: 3em;
}

<div class="waitlist">
  <div class="panel panel-default">
    <div class="panel-heading" style="color: rgb(255, 255, 255); background-color: rgb(204, 0, 0);">
      <h3 class="panel-title" style="font-size: 1.25em;">
<span>Wait time:</span>
<span class="pull-right">4 hr 0 min</span>

</h3>
    </div>
    <p class="clearfix"></p>
    <div class="panel-body clearfix">

      <!-- ko foreach: WaitList -->

      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order" >1.</span>
<span class="name">tes, e</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">Next</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>

      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">2.</span>
<span class="name">fdg, 3</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">25 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">3.</span>
<span class="name">fdg, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">50 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">4.</span>
<span class="name">gdf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 5 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">5.</span>
<span class="name">dsf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 30 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">6.</span>
<span class="name">gf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 55 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">7.</span>
<span class="name">thi, d</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">2 hr 20 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">8.</span>
<span class="name">fds, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">2 hr 45 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">9.</span>
<span class="name">rtr, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">3 hr 10 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">10.</span>
<span class="name">tss, g</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">3 hr 35 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>
      <!-- /ko -->

    </div>
    <div class="disclamier panel-footer" style="font-family: sans-serif;">
      <p>Wait times are approximate. Actual wait time may vary.</p>
    </div>
  </div>
</div>