выравнивание текстовых полей по форме

Question

Ниже вырезано из моей страницы регистрации.Как я могу сделать все текстовые поля выровненными?Эта форма выглядит некрасиво.

Answer 1

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

Answer 2

Используйте таблицу с двумя ячейками

затем выполните выравнивание текста CSS, чтобы выровнять их. Для кнопки вы можете использовать colspan = 2 и поместить ее в центр.

Я знаю, что таблицы не для макета, но по моему опыту, с ними проще всего выравнивать поля.