垂直对齐输入文本框

Question

我想垂直对齐特定的所有输入框是div

我的代码是在               http://jsfiddle.net/eSPMr/72/

<div id="editpart3">
<div id ="address1">
<p><b>Residential Address:</b></p>
<p> Line1 : <input type="text" value="@Model.Mem_ResAdd1" name="Mem_ResAdd1" /></p>
<p> Line2 : <input type="text" value="@Model.Mem_ResAdd2" name="Mem_ResAdd2" /></p>
<p> Line3 : <input type="text" value="@Model.Mem_ResAdd3" name="Mem_ResAdd3" /></p>
<p> Line4 : <input type="text" value="@Model.Mem_ResAdd4" name="Mem_ResAdd4" /></p>
<p>PIN Code : <input type="text" value="@Model.Mem_ResPin" name="Mem_ResPin" /></p>
<p><b>Res Phone: &nbsp;</b> <input type="text" value="@Model.Mem_ResPh" name="Mem_ResPh" /></p>
</div> 
/div>

#editpart3 {
margin-top:10px;
border:.5px solid #bbb;
min-height:250px;
height:auto;
width:100%;
border-radius:5px;

#editpart3 input[type="text"] {
    width:50%;
    margin-left:5%;
}
 #address1 {
float:left;
width:40%;
margin-left:4%;
height:auto;
}
#address2 {
float:left;
margin-left:9%;
height:auto;
width:40%;
}
#address1 p,#address2 p{
padding-top:10px;
}

我试图将保证金留下但影响所有输入框。这是唯一可能的，当我单独使用那个特定的输入框时？

Answer 1

虽然我不反对将表格用于表格数据以外的任何内容，但在这种情况下，它们对于对齐表单输入元素非常有用和有效：

<div id ="address1">
<p><b>Residential Address:</b></p>
<table border = "0">
<tr>
<td><p> Line1 : </td><td><input type="text" value="@Model.Mem_ResAdd1" name="Mem_ResAdd1" /></td></p></tr>
</div> 

继续表格以获取其他输入元素。

Answer 2

对于表单的良好格式，我更喜欢使用 tabular structure 这样

选中此JSFiddle