複数のラベルの位置合わせ - 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を参照してください。