在不使用表格的情况下对齐相等的列

Question

我有这样的li

<li>0 - 10 Years old</li>
<li>11 - 20 Years old</li>

它们有不同的长度。我想每行居中 2 列并将它们左对齐。但我的尝试并不完美，由于长度不同，它们不能平等地向左对齐。

我想过使用表格，但什么是现代解决方案？请注意，我没有为此使用任何 css 框架。

https://jsfiddle.net/coeh77Lp/

Answer 1

只需将小提琴中的CSS更新为 https://jsfiddle.net/coeh77Lp/3/

ul {
width: 400px;
column-count: 2;
column-gap: 10px;
}

Answer 2

您可以对li使用固定宽度：

https://jsfiddle.net/w25m1a81/1/

Answer 3

可以将每个选定<li>的 float 属性设置为左或右。 还要记住指定nth-child(2n-1)属性以提供类似对齐的表格。

.li{
float: left;
}
li:nth-child(2n){
float right
}

同时显示：内联块可以使用：

.li{
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
}

还为容器提供固定的宽度、高度和边距将改善对齐方式

Answer 4

我们应该进行一些调整，以便您了解如何实现所需的解决方案：

• 避免像<ul>那样内联 css 样式
• 将列表标记与许多其他元素混合可以非常快速地创建混乱的代码，让我们将所有<li>重命名为<div>。
• 接下来，我们也想将所有数字值包装在一个容器中，因为这样我们就可以更好地控制布局：例如<span class="numerics">51 - 60</span>
• 现在我们建立了灵活的网格系统。我们可以为此使用.customLegend容器，但我建议为columns添加一个新类，以便您可以将个人样式与布局样式分开。https://www.sitepoint.com/understanding-css-grid-systems/

我免费添加了一些样式，你可以通过css。如果您想自己尝试进一步调整，我也创建了一个 jsfiddle：https://jsfiddle.net/coeh77Lp/2/

.customLegend {
float: left;
width: 50%;
max-width: 170px; /* stack up cols if there is enough space */
margin-bottom: 5px;
}
.customLegend .symbol {
background: #333333;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
margin-right: 3px;
}
.numerics {
text-align: right; /* better readability */
min-width: 50px;
display: inline-block;
padding: 2px 4px 2px 2px;
margin-right: 2px;
border-bottom: 2px solid #ddd;
}
.customLegend .label {
display: inline-block;
margin-right: 20px;
}

<div class="customLegend">
<span class="symbol" style="background: rgb(51, 51, 51);"></span>
<div class="label"><span class="numerics">0 - 10</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: rgb(102, 102, 102);"></span>
<div class="label"><span class="numerics">11 - 20</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: rgb(153, 153, 153);"></span>
<div class="label"><span class="numerics">21 - 30</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: rgb(221, 221, 221);"></span>
<div class="label"><span class="numerics">31 - 40</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: rgb(238, 238, 238);"></span>
<div class="label"><span class="numerics">41 - 50</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: red;"></span>
<div class="label"><span class="numerics">51 - 60</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: blue;"></span>
<div class="label"><span class="numerics">61 - 70</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: pink;"></span>
<div class="label"><span class="numerics">71 - 80</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: green;"></span>
<div class="label"><span class="numerics">81 - 0</span> Years old</div>
</div>