1. 首頁
  2. 問答
  3. 對齊不同寬度的單詞

對齊不同寬度的單詞

2016-02-23 75 views
0

我知道這聽起來像一個愚蠢的問題，但我有一個大腦放屁，無法想到一個簡單的解決方案。我只是想着桌子，我真的不想走那條路。對齊不同寬度的單詞

我有一個人在他們旁邊等待時間的列表。我現在必須把他們的'身份'貼在這個人的旁邊。這是沒有問題的，但是我正在被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>

來源

2016-02-23 zazvorniki

+0

。那麼這應該是什麼樣子？ –

+2

我不知道使用表有什麼問題 - 這看起來像表格數據。 – Hatchet

回答

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>

來源

2016-02-23 21:51:25 Hatchet

+0

這太棒了，謝謝！我知道我正在推翻這個！我總是這樣做！ :) – zazvorniki

+0

@zazvorniki不客氣！只要確保你設定的寬度不會溢出，或確保你準備好了。快樂編碼！ – Hatchet

0

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>

來源

2016-02-23 21:51:54

0

不要害怕表格數據表！

是的，它們不適合佈置頁面，但是從描述中可以看出，本質上表格數據需要以表格佈局顯示。這正是表格的用途，所以不要害怕使用它們。

It's OK to Use Tables

來源

2016-02-23 21:57:41 JDB

+0

這是因爲我將不得不重構整個html，如果我這樣做，那麼我必須修改3000行的JavaScript。此外，這是顯示在一個自助服務終端上，這種模式不適用於表 – zazvorniki

+0

足夠公平。 「技術約束」是我們必須面對的問題。令人驚訝的是，一個自助服務終端在桌子上表現不佳，但使用更高級的CSS佈局完美地工作。 – JDB

相關問題

 相關問題