DEMO

Question

我正试图找到答案，但没有在搜索中找到任何东西。基本上，我的输出看起来像：

姓名：Joe Smith

地址：555 Main Street

标题：首席厨师和洗碗机

现在，它看起来不太好，因为结果没有对齐。比如，“Joe”和“555”和“Chief”都应该均匀地左对齐，而不是简单地用冒号跟随空格。在CSS中实现这一目标的最佳方法是什么？

Answer 1

有很多方法。这是一种做法。

HTML

My Profile<br />
    <span class="label">Name</span><span class='values'>: Joe Smith</span><br />
    <span class="label">Address</span><span class='values'>: 555 Main Street</span><br />
    <span class="label">Title</span><span class='values'>: Chief cook and bottlewasher</span><br />

CSS

.label { display:inline-block; width:100px; text-align:left;}

See demo

Answer 2

没有“最佳方法”，因为您可以通过多种方式实现这一目标，但是您可以使用dl，dt和dd

来实现这一目标

DEMO

<强> HTML

<dl>
    <dt>Name</dt>
    <dd>Joe Smith</dd>
    <dt>Address</dt>
    <dd>55 Main Street</dd>
    <dt>Title</dt>
    <dd>Chief cook and bottlewasher</dd>
</dl>

<强> CSS

dt {
    display:inline-block;
    width: 50px /* Set the width of the first column here */
}
dd {
    display:inline
}
dd::after {
    content:'\A';
    white-space:pre
}

希望在CSS中对齐文本

2 个答案:

DEMO