HTML文本輸入字段與同一類中的其他字符寬度不同

Question

對不起，如果標題不清楚，我想不到一個簡短的方式來說明它，而不會帶走太多。

現在，我已經做了一個簡單的聯繫表格（目前不提交等）與4個標籤和4個文本輸入。每一對都包含在它自己的div中，然後按課程設計。

一切排隊，是我想要的地方，除了第四個div是關閉的。文本字段比其他字段寬一個像素，這也會使標籤不對齊。

下面是我得到了什麼？

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" /> 
     </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：

<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

經過反覆試驗，我已經找到一種方法，以使其正常工作。

下面是更新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

試試這個CSS

.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