Align labels in form next to input

by

WARNING: OUTDATED ANSWER

Nowadays you should definitely avoid using fixed widths. You could use flexbox or CSS grid to come up with a responsive solution. See the other answers.

One possible solution:

  • Give the labels display: inline-block;
  • Give them a fixed width
  • Align text to the right

That is:

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}​
<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

JSFiddle

More Related Contents:

  1. how to align the image to the center? [closed]
  2. How to horizontally center an element
  3. Set cellpadding and cellspacing in CSS?
  4. Vertically align text next to an image?
  5. How to center an element horizontally and vertically
  6. Best way to center a on a page vertically and horizontally? [duplicate]
  7. How to align 3 divs (left/center/right) inside another div?
  8. Does UL have default margin or padding [duplicate]
  9. How to align checkboxes and their labels consistently cross-browsers
  10. How can I vertically center a div element for all browsers using CSS?
  11. Center aligning a fixed position div
  12. CSS – Make divs align horizontally
  13. HTML-Tooltip position relative to mouse pointer
  14. Why my inline-block divs are not aligned when only one of them has text? [duplicate]
  15. CSS – How to have children in different parents the same height?
  16. Center form submit buttons HTML / CSS
  17. How can I horizontally center an element?
  18. How to center an iframe horizontally?
  19. Responsive image align center bootstrap 3
  20. CSS align images and text on same line
  21. How to align footer (div) to the bottom of the page? [duplicate]
  22. CSS way to horizontally align table
  23. align images side by side in html
  24. Load a low-res background image first, then a high-res one
  25. Can I use an image from my local file system as background in HTML? [duplicate]
  26. Why is my .sticky-top class not working in Bootstrap 4?
  27. Use the HTML tag as a background image instead of the CSS background-image property?
  28. Make plus symbol in CSS
  29. How to make Bootstrap cards the same height in card-columns?
  30. Flex elements ignore percent padding in Firefox

Leave a Comment