使文本字段在表单中对齐答案

【问题标题】：making text-fields aligned in a form使文本字段在表单中对齐
【发布时间】：2012-04-08 19:30:38
【问题描述】：

以下是我的注册页面的剪辑。如何使所有文本字段对齐？这个表格看起来很丑。

【问题讨论】：

标签： html forms alignment

【解决方案1】：

使用包含两个单元格的表格

然后执行 CSS text-align 以使它们对齐。对于按钮，您可以使用 colspan=2 并将其放在中心。

我知道表格不适合布局，但根据我的经验，它们是最容易对齐字段的。

【讨论】：

正确。通常被称为表格单元格。

【解决方案2】：

<style type="text/css">
body,input,label{`padding:0;
margin:0;`}
body > div{`background-color: #171717;
border: 1px solid #CCCCCC;
border-radius: 20px;
box-shadow: 0px 0px 10px #CCCCCC;
padding: 20px;
margin: 10px 10px;
width: 310px;
margin:30px auto;`}
input {`display: block;
width:150px;
float: left;
padding: 8px;
margin-bottom: 10px;
border: solid 1px #999;
border-radius: 5px;
font: normal 12px Arial;`}
label{`display: block;
width: 130px;
text-align: right;
float: left;
padding: 11px 10px 0 0;
font:bold 13px Verdana;
color:white;`}
button {`display: block;
margin-top:10px;
margin-left:140px;
width:50px;`}
</style>
</head>

<label>First Name</label><input name="txt" type="text" /> 


<label>Last Name</label><input name="txt" type="text" />


<label>Email</label><input name="txt" type="text" />


 <label>Password</label><input name="txt" type="password" />


<label>Retype Password</label><input name="txt" type="password" />


<button>Send</button>
</form>
</div>
</body>

【讨论】：