CSSライブラリを使用しないフォームのインラインCSS

Question

私は次のようなフォームを持っています。

私は右側にあるすべてのラベルを揃えたいともラベルの後にコロンも（同じ縦線で表示されなければなりません）整列されなければならない

私は、ブートストラップのような任意のCSSライブラリを使用したくありません次のようになど

私は今取得しています：

Answer 1

は、はい、それはこの

<div style="width:100%"> 
    <div style="width:20%; float:left;"> 
     <label>Name</label> 
    </div> 
    <div style="width:80%; float:left;"> 
     <input type="text"> 
    </div> 
</div> 

Answer 2

#contact_form label { 
    text-align: right; 
    display: block; 
} 

<label>は、デフォルトでは、インラインである

Answer 3

よう試みることも可能であるあなたの質問はあまり明確ではないですが、あなたはこのような何かをしたいですか？

.inputblock { 
 
    display: inline-block; 
 
    background:#f1f1f1; 
 
    padding:1em; 
 
} 
 
.row { 
 
    text-align: right; 
 
    padding: 2px 0; 
 
} 
 
.row input, .row select { 
 
    border-radius:.25em; 
 
    width:20em; 
 
    box-sizing:border-box; 
 
} 
 

<div class="inputblock"> 
 
    <div class="row"> 
 
    <label for="firstname">First name:</label> 
 
    <input name="firstname" id="firstname"> 
 
    </div> 
 
    <div class="row"> 
 
    <label for="lastname">Last name:</label> 
 
    <input name="lastname" id="lastname"> 
 
    </div> 
 
    <div class="row"> 
 
    <label for="state">State:</label> 
 
    <select id="state"> 
 
    <option>Australia</option> 
 
    </select> 
 
    </div> 
 
</div>