对齐不同宽度的单词

Question

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

我有一个人在他们旁边等待时间的列表。我现在必须把他们的'身份'贴在这个人的旁边。这是没有问题的，但是我正在被ocd和状态不太排队的事实给我带来了很大的影响。

我已经包含了我正在尝试做的事情。我尝试了漂浮和其他一些技巧，但我似乎无法让他们甚至。

我不能做的一件事就是改变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>

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>

Answer 2

CSS表似乎是答案。

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

<div class="panel-body clearfix"> 
 
    <h4 class="people" style="font-family: sans-serif;"> 
 
<span class="order">6.</span> 
 
<span class="name">gf, f</span> 
 
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span> 
 
<span class="EstWaitTime">1 hr 55 min</span> 
 
</h4> 
 
    <h4 class="people" style="font-family: sans-serif;"> 
 
<!--<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> 
 
</div>

Answer 3

不要害怕表格数据表！

是的，它们不适合布置页面，但是从描述中可以看出，本质上表格数据需要以表格布局显示。这正是表格的用途，所以不要害怕使用它们。

It's OK to Use Tables