HTMLテキスト入力フィールドの幅が同じクラスの他の人と同じである

Question

申し訳ありませんが、タイトルが明確でない場合は、それほど多くのものを取り除くことなく、それを述べる短い方法を考えることができませんでした。

ここでは、4つのラベルと4つのテキスト入力を持つ簡単な連絡フォーム（現在は提出していません）を作成しました。各ペアはそれ自身のdivの中に含まれていて、クラス別にスタイルされています。

4番目のdivがオフの場合を除いて、すべての行が整列しています。テキストフィールドは残りのピクセルよりも1ピクセル広くなり、ラベルも位置合わせから外れます。

<div id="contact-form"> 
    <div id="form-title"> 
    <h3>Contact Form</h3> 
    <h5>Enter your details below to contact me</h5> 
    </div> 

    <form id="contact"> 
    <div class="input"> 
     <label>First name: 
     <input class="txt-box" type="text" /> 
     </label> 
    </div> 

    <div class="input"> 
     As above, "Surname" 
    </div> 

    <div class="input"> 
     As above, "Phone" 
    </div> 

    <div class="input"> 
     As above, "Email" 
    </div> 

    </form> 
</div> 

CSS：

.input { 
    width:100%; 
    display:inline-block; 
} 

.input label { 
    display:inline-block; 
    vertical-align:left; 
    text-align:right; 
    padding:0; 
} 

.input input { 
    width:60%; 
    margin:0 5px 0 3px; 
    display:inline-block; 
    vertical-align:right; 
} 

ここで、それは私がしてきた

Title... 

First name: [text] 
    Surname: [text] 
    Phone: [text] 
    Email: [text ] 

を表示する方法を説明します。ここ

は私が...

HTMLが持っているものです他のすべてのコードと何もないこのセクションと全くやり取りしているはずです。

私は検索して試したことがありますので、スタイリングされた方法が最良でない可能性があります。

編集： ここにはセクションの完全なコードがあります。

HTML：

<div id="contact-form"> 
    <div id="form-title"> 
    <h3>Contact Form</h3> 
    <h5>Enter your details below to contact me.</h5> 
    </div> 

    <form id="contact"> 
    <div class="input"> 
     <label>First name 
     <input class="txt-box" type="text" placeholder="John" /> 
     </label> 
    </div> 

    <div class="input"> 
     <label>Surname: 
     <input class="txt-box" type="text" placeholder="Smith /> 
     </label> 
    </div> 

    <div class="input"> 
     <label>Phone 
     <input class="txt-box" type="text" placeholder="0412345678" /> 
     </label> 
    </div> 

    <div class="input"> 
     <label>Email 
     <input class="txt-box" type="text" placeholder="j.smith@example.com" /> 
     </label> 
    </div> 
    </form> 
</div> 

Answer 1

このCSSを試してみてください。

ここで更新されたHTMLです：

<div id="contact-form"> 
    <div id="form-title"> 
    <h3>Contact Form</h3> 
    <h5>Enter your details below to contact me.</h5> 
    </div> 

    <form id="contact"> 
    <div class="input"> 
     <label>First name:</label> 
     <input class="txt-box" type="text" placeholder="John" /> 
    </div> 

    <div class="input"> 
     <label>Surname:</label> 
     <input class="txt-box" type="text" placeholder="Smith" /> 
    </div> 

    <div class="input"> 
     <label>Phone:</label> 
     <input class="txt-box" type="text" placeholder="0412345678" /> 
    </div> 

    <div class="input"> 
     <label>Email:</label> 
     <input class="txt-box" type="text" placeholder="j.smith@example.com" /> 
    </div> 
    </form> 
</div> 

および更新CSS：

.input { 
width:100%; 
} 

.input label { 
    width:35%; 
    display:inline-block; 
    vertical-align:left; 
    text-align:right; 
    padding:0; 
    padding-top:5px; 
} 

.txt-box { 
    width:50%; 
    margin:0; 
    margin-left:3px; 
    display:inline-block; 
    vertical-align:right; 
} 

Answer 2

が、私はそれを正しく動作させる方法を発見した試行錯誤

.input { 
 
    width:100%; 
 
    display:inline-block; 
 
} 
 

 
.input label { 
 
    display:inline-block; 
 
    vertical-align:left; 
 
    text-align:right; 
 
    padding:0; 
 
    width:45%; 
 
} 
 

 
.input input { 
 
    width:55%; 
 
    margin:0 5px 0 3px; 
 
    display:inline-block; 
 
    vertical-align:left; 
 
}

<div id="contact-form"> 
 
    <div id="form-title"> 
 
    <h3>Contact Form</h3> 
 
    <h5>Enter your details below to contact me.</h5> 
 
    </div> 
 

 
    <form id="contact"> 
 
    <div class="input"> 
 
     <label>First name: 
 
     <input class="txt-box" type="text" placeholder="John" /> 
 
     </label> 
 
    </div> 
 

 
    <div class="input"> 
 
     <label>Surname: 
 
     <input class="txt-box" type="text" placeholder="Smith" /> 
 
     </label> 
 
    </div> 
 

 
    <div class="input"> 
 
     <label>Phone: 
 
     <input class="txt-box" type="text" placeholder="0412345678" /> 
 
     </label> 
 
    </div> 
 

 
    <div class="input"> 
 
     <label>Email: 
 
     <input class="txt-box" type="text" placeholder="j.smith@example.com" /> 
 
     </label> 
 
    </div> 
 
    </form> 
 
</div>

jsfiddle output