making text-fields aligned in a form - html

Question

The following is a cut from my registration page. How can i make all the text-fields aligned ?
This form looks ugly.

Answer 1

Use a table with two cells
then do CSS text-align to have them aligned. For the button you can use colspan=2 and put it in the center.
I know tables are not for layout, but from my experiences they are the easiest to align fields with.

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>