我有以下帶有自己的 css 和 bootstrap 類的 html 代碼：
<div class="d-flex">
<p class="table-string">91.86</p>
<span class="ml-2">( 61%)</span>
</div>
<div class="d-flex">
<p class="table-string">108.15</p>
<span class="ml-2">( 108%)</span>
</div>
<div class="d-flex">
<p class="table-string">329.93</p>
<span class="ml-2">( 593%)</span>
</div>
和 CSS：
.table-string {
width: 100%;
text-align: end;
}
我需要收到這樣的專欄：
但實際上得到這個：
如何對齊列中沒有百分比的值，以便它們嚴格地在彼此之下：數百下數百，數十下數十，一個下一個？而且值和百分比必須在欄位的末尾對齊。謝謝你的幫助
uj5u.com熱心網友回復：
作為臨時解決方案，您可以使用這樣的方法。只需設定width: 50%;您的<p>和<span>標簽。
.table-string {
width: 50%;
text-align: end;
}
span.ml-2 {
width: 50%;
text-align: left;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex">
<p class="table-string">91.86</p>
<span class="ml-2">( 61%)</span>
</div>
<div class="d-flex">
<p class="table-string">108.15</p>
<span class="ml-2">( 108%)</span>
</div>
<div class="d-flex">
<p class="table-string">329.93</p>
<span class="ml-2">( 593%)</span>
</div>uj5u.com熱心網友回復：
您需要將您的行分成 2 個相等的一半并根據文本對齊
<div class="row" style="width:10rem">
<p class="col-6 p-1 text-end">91.86</p>
<span class="col-6 p-1 text-start">( 61%)</span>
</div>
這是一個例子
需要幫助請叫我
uj5u.com熱心網友回復：
d-flex從所有的 Div 中洗掉，然后放到d-inline所有<p>的 和 上<span>。有了這個，您很可能不需要 CSS，.table-string因此也將其洗掉。
例如
<p class="d-inline">91.86</p>
<span class="ml-2 d-inline">( 61%)</span>
uj5u.com熱心網友回復：
顯然您正在使用 Bootstrap，如果我理解您的問題，您只需要向 flex 項添加兩個類，flex-column align-items-end，以設定 flex 項的方向并更改橫軸上的對齊方式：
<div class="d-flex flex-column align-items-end">
[…]
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/375589.html