我有一個無序串列，其中顯示了一些物件。這些物件有多個我想顯示的屬性。我在 Python Flask 和 jinja 中做了這個。
<li class="list-group-item">
<a href="link">{{candidate.name}}</a>
<label id="min">Min. value:<input type="number" id="min" name="min-val" min="1" max="100"></label>
<label id="max">Max. value:<input type="number" id="max" name="max-val" min="1" max="100"></label>
<p id="average_rank">{{'%0.2f' % average_rank|float}}</p>
<p id="points">{{points}}</p>
</li>
我想我可以使用以下 css 讓所有列從同一位置開始。
#points {
position: relative;
left: 85%;
}
#average_rank {
position: relative;
left: 75%;
}
#min {
position: relative;
left: 5%;
}
#max {
position: relative;
left: 15%;
}
label {
vertical-align: top;
}
a {
position: relative;
left: 1%;
text-align: left;
float: left;
}
我只是以一定的百分比改變相對位置。這似乎不起作用，并且看起來專案的長度會影響展示位置。
如何將屬性放在列中的串列元素中？
我希望它看起來像這樣：
A link1 Attribute1 Rank
Longer_link Attribute2 Rank2
Link3 Attribute345 Rank3
uj5u.com熱心網友回復：
要開始，請將您的所有 CSS 替換為：
.list-group-item {
display: grid;
grid-template-columns: repeat(5, auto);
align-items: center;
}
grid-template-columns定義了 5 列的寬度，所以首先你會發現你的列不會在不同的專案中排列，因為這里它們都設定為auto. 您可以通過使用一致定義的值（百分比、像素、vw 等）來獲得專案的一致性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/482461.html
上一篇：使用python燒瓶運行顫振