多重标签的对齐 - HTML，CSS

Question

我在调整标签时遇到问题。

我现在拥有的：

HTML：

<div class="personalinformation">
<label for="" class="info">Firstname:</label>
<label for="">Bill</label>
</div>

<div class="personalinformation">
<label for="" class="info">Lastname:</label>
<label for="">Gates</label>
</div>

<div class="personalinformation">
<label for="" class="info">Country:</label>
<label for="">France</label>
</div>

CSS：

.personalinformation {
text-align: center;
margin-left: auto;
text-justify: inter-word;
margin: 0 auto 1em auto;
}

.info {
font-weight: bold;
text-align: left;
margin-right: 50px;
}

如何让我的标签像这样对齐：

Answer 1

您需要为每个标签设置固定宽度和float left属性。 看看片段： http://www.bootply.com/wEqBL8Tvo0

此致

Answer 2

标签旨在用于表单输入。你真的在这里做了更多的定义列表。尝试：

<dl class="personalinformation">
  <dt class="info">Firstname:</dt>
  <dd>Bill</dd>
</dl>
<dl class="information">
  <dt class="info">Lastname:</dt>
  <dd>Gates</dd>
  <dt class="info">Country:</dt>
  <dd>France</dd>
</dl>

类似

dt,dd{display:inline-block; width:40%}
dl{margin: 0}
dt{text-align:left}
dd{text-align:right}

Answer 3

在不更改HTML的情况下，您可以为info类CSS：

指定固定宽度

.info {
    font-weight: bold;
    text-align: left;
    width: 100px; //change this to what you want
    display: inline-block;
}

请参阅fiddle。