I'm new to CSS and have a simple login form that I'm trying to align correctly. Basically two columns with the labels and the Login button in one column and the text boxes in another column. How do I do this in CSS?
The HTML code is:
<body>
<form action="" method="post">
<label> Username </label>
<input type="text"/>
<label> Password </label>
<input type="password"/>
<input type="submit" value="submit"/>
</form>
</body>
This is one approach that works:
form {
width: 80%;
margin: 0 auto;
}
label,
input {
/* In order to define widths */
display: inline-block;
}
label {
width: 30%;
/* Positions the label text beside the input */
text-align: right;
}
label+input {
width: 30%;
/* Large margin-right to force the next element to the new-line
and margin-left to create a gutter between the label and input */
margin: 0 30% 0 4%;
}
/* Only the submit button is matched by this selector,
but to be sure you could use an id or class for that button */
input+input {
float: right;
}<form action="#" method="post">
<!-- note that I've added a 'for' attribute to
both of the <label> elements, which is
equal to the 'id' attribute of the relevant
<input> element; this means that clicking
the <label> will focus the <input>: -->
<label for="username">Username</label>
<input id="username" type="text" />
<label for="password">Password</label>
<input id="password" type="password" />
<input type="submit" value="submit" />
</form>