我是CSS的新手。我需要做的是对齐两行分隔的行，它们可以有不同的数字。我现在拥有的是：
First line: 1,1,1,1
Second: 2,2,2,2
我需要实现的是：
First line: 1,1,1,1
Second: 2,2,2,2
.wrap {
display: flex;
}<div class="wrap">
<div class="foo">
<p>First line: 1,1,1,1</p>
<p>Second: 2,2,2,2</p>
</div>
</div>如您所见，目前这些数字彼此不一致。如果我添加类似text-align的东西并且数字会改变，它也不会对齐。如何在 CSS 中做到这一点？
用跨度将文本和数字换行，并使用 CSS 显示为表格：
.foo {
display: table
}
.foo p {
display: table-row;
}
.foo span {
display: table-cell;
padding: 0 0.5em;
}<div class="foo">
<p>
<span>First line:</span>
<span>1,1,1,1</span></p>
<p>
<span>Second:</span>
<span>2,2,2,2</span>
</p>
</div><p style="display:block; width:130px; background-color:red; "> First line: <span style="float:right">1,1,1,1</span></p>
<p style="display:block; width:130px; background-color:red;">Second:<span style="float:right">2,2,2,2</span></p>
使用显示块和宽度将它们分别放在单独的行中
如果你想使用 flex：
<body style="diplay:flex">
<p style=" width:130px; background-color:red; "> First line: <span style="float:right">1,1,1,1</span></p>
<p style="width:130px; background-color:red;">Second:<span style="float:right">2,2,2,2</span></p>
</body>