Position Text Labels on Forms Using CSS
This information is by Cameron Adams from a SitePoint newsletter
In this post, he explains three common approaches to positioning text labels on web forms using CSS:
- top-positioned text labels
- left-aligned text labels
- right-aligned text labels
Using Top-positioned Text Labels
Positioning labels at the top of their form elements is probably the easiest layout to achieve, as we only need to tell the label to take up the entire width of its parent element.
As our form elements/labels are inside ordered list items (which are block elements), each pair will naturally fall onto a new line, as you can see from Figure 9. All we have to do is get the form elements and labels onto different lines.
This exercise is easily completed by turning the label elements into block elements, so that they’ll occupy an entire line:
label {
display: block;
}
It’s a simple change, but one which makes the form much neater, as shown below.
Read the full tutorial:
 |
Position Text Labels on Forms Using CSS by Cameron Adams |