使文本字段在表单中对齐

Question

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

Answer 1

使用包含两个单元格的表

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

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

Answer 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>