0

I want to vertically align all the input boxes in a particular is div

my code is in
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;
}

i am tried to put margin left but affect all the input box. Is this only possible, when i take that particular input boxes seperatly ?

4

2 回答 2

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>

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

于 2013-09-02T07:11:56.987 回答
1

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

在此处输入图像描述

检查这个JSFiddle

于 2013-09-02T07:21:18.027 回答