3

So I'm trying to create a pretty form with labels. The aim is for all the labels to be inline with the inputs, while being left aligned. Because I also want to inputs to be left aligned, the space between each label and input is different.

What I'm working with

Any help would be appreciated. Thanks as always, much obliged.

Kevin Lewis
  • 1,070
  • 3
  • 10
  • 18

1 Answers1

4

Set the width of your labels to be the same and all your inputs will be aligned

label {
    display: inline-block; //So that we can set the width
    width: 40px; //Whatever the widest label will be.
}

This can cause some issues if you add longer labels, you may need to adjust the width so that it doesn't overflow.

Schleis
  • 41,516
  • 7
  • 68
  • 87
  • 1
    The approach requires a guess on suitable width for the labels, and this is risky because you cannot know which font will actually be used. Using a table, as suggested in answers to earlier questions about this, is superior in this respect. – Jukka K. Korpela Sep 03 '13 at 18:08
  • I agree having to know the correct widths is a drawback of this solution. Using tables, IMO, is not a superior solution. In the questions linked there are solutions to this problem that do not require wrapping the elements in a table. These are a more superior solution to the problem. – Schleis Sep 03 '13 at 18:23
  • The answer you are referring to does not contain any code, only a link, and the linked document (which happens to still exist) uses a fixed width setting for the label texts. And its not a matter of having to know the correct widths; how *could* you know them without making wild assumptions? – Jukka K. Korpela Sep 03 '13 at 18:35
  • this is a great solution. Simple! Works. – johny why Jan 24 '14 at 18:56