对齐不同宽度的单词

时间：2016-02-23 21:41:55

标签： html css

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

我有一个旁边有等待时间的人员列表。我现在必须坚持他们的“地位”。这不是问题，但是我现在正处于这种状态，而且状态不合适的事实让我感到非常困扰。

我已经包含了我正在尝试做的事情的嗤之以鼻。我试过浮动和其他一些技巧，但我似乎无法让它们均匀。

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

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

3 个答案:

答案 0 :(得分：1)

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

具体做法是：

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

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

CSS表似乎就是答案。

＆＃13;
＆＃13; 
connect.xml
＆＃13; 
.panel-body {
  display: table;
  width: 400px
}
.people {
  display: table-row;
  table-layout: fixed;
}
.people span {
  display: table-cell;
  border: 1px solid lightgrey;
}
.EstWaitTime {
  text-align: right;
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

不要害怕表格数据的表格！

是的，它们不适合布局页面，但根据您的描述，您有固有的表格数据需要以表格布局显示。这正是桌子的用途，所以不要害怕使用它们。

It's OK to Use Tables

相关问题
最新问题