HTML & CSS
Article

DesignFestival: Position Text Labels on Forms Using CSS

By Cameron Adams

In this post, I’ll explain 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.

Follow this link:
DesignFestival: Position Text Labels on Forms Using CSS

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.