在 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。您可以通过使用一致定义的值（百分比、像素、vw 等）在您的项目中获得一致性

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

Make columns within a list in HTML/CSS

html

css

flask