如何水平对齐文本行？

Question

假设我们有以下内容：

Label: Some text

Longer label: Other text

有没有办法让冒号对齐后的文本？ 例如;

Label:          Some text

Longer label:   Other text

Answer 1

有很多存档方法，这个是使用flexbox 。

我们创建了一个名为aligned的 class ，它将是一个 flexbox 容器， flex-direction允许我们使用此 class 指定标签内元素的方向，因为在这种情况下，我们希望flex-direction: row .

然后，对于具有.aligned class 的 div 中的每个<p> （这是使用 CSS 中的.aligned > p完成的），我们将为每个<p>设置定义的min-width和margin 。

 <style>.aligned { display: flex; flex-direction: row; }.aligned > p{ min-width: 14%; margin: 1%; } </style> <div class="aligned"> <p> Label: </p> <p> Some text </p> <p> Some text </p> </div> <div class="aligned"> <p> Longer label: </p> <p> Other text </p> <p> Other text </p> </div>

或者，您也可以使用表格：

 <table> <tr> <td>Label:</td> <td>Some text</td> <td>Some text</td> </tr> <tr> <td>Longer Label:</td> <td>Other text</td> <td>Other text</td> </tr> </table>