在HTML/CSS中创建列表中的列

Question

我有一个无序列表，我在其中显示一些对象。这些对象有我想要显示的多个属性。这是我在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

Answer 1

首先，将所有的CSS替换为:

.list-group-item {
display: grid;
grid-template-columns: repeat(5, auto);
align-items: center;
}

grid-template-columns定义了5列的宽度，所以一开始你会发现你的列并没有在不同的项目上对齐，因为这里它们都被设置为auto。您可以通过使用一致定义的值(百分比，像素，大众等)来获得项目的一致性