Align labels in form next to input

Question

I have very basic and known scenario of form where I need to align labels next to inputs correctly. However I don't know how to do it.

My goal would be that labels are aligned next to inputs to the right side. Here is picture example of desired result.

enter image description here

I have made a fiddle for your convenience and to clarify what I have now - http://jsfiddle.net/WX58z/

Snippet:

<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>

score 220 · Answer 1 · edited Apr 28 '23 at 17:55

220

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:

Determine a reasonable fixed width for label elements and set it using width
Give them display: inline-block
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

edited Apr 28 '23 at 17:55

Philippe Cloutier

156
10

answered Mar 13 '12 at 14:59

bfavaretto

71,580
16
111
150

4

How do I make this work if some of the labels are check-boxes or radio buttons? The labels for these elements end up with the same fixed width as the textbox labels which is not desired. Is there a way to do this without a fixed width on the label? – Rebecca Meritz Jan 14 '14 at 12:15
@RebeccaMeritz You mean when the markup has the checkbox first, and the label afterwards? You could add a class to both, and style them separately. Perhaps you should [ask a new question](http://stackoverflow.com/questions/ask) about it. – bfavaretto Jan 14 '14 at 14:34
2

How to make this responsive? And how to cope with i18n? I mean that text labels have different length in different languages, thus I fear that that setting fixed width fill not work if the text is long. – Azimuth Apr 06 '18 at 12:16
@Azimuth Nowadays, you might want to use CSS grid instead. – bfavaretto Apr 06 '18 at 14:04
2

this is marking fixed width, it should be dynamic, based on max label width. – Samyak Jain May 23 '19 at 17:21
I agree with the people here above, that using a fixed width is a bad solution when it comes down to scaling of the labels and the usage of dynamic width's based on content. – Barrosy Oct 09 '20 at 18:28
@Barrosy I totally agree, you could use flexbox or grid nowadays. That was not the case when this answer was written 8 yrs ago... – bfavaretto Oct 09 '20 at 18:33
@bfavaretto Even so, I belive better solutions existed back then as well, but you might be right. – Barrosy Oct 11 '20 at 14:32
CSS flexbox is merely a candidate recommendation, while CSS grid is not even at that stage yet (draft CR). Unfortunately, the warning is misleading; this answer remains current. – Philippe Cloutier Apr 27 '23 at 20:27
Regardless of the formal status of flexbox and grid, I'd avoid fixed widths whenever possible today. That's the spirit of the warning. Also, both technologies are widely supported nowadays. @PhilippeCloutier – bfavaretto Apr 28 '23 at 01:00

David Rutherford · Accepted Answer · 2018-02-07T20:12:50.117

80

While the solutions here are workable, more recent technology has made for what I think is a better solution. CSS Grid Layout allows us to structure a more elegant solution.

The CSS below provides a 2-column "settings" structure, where the first column is expected to be a right-aligned label, followed by some content in the second column. More complicated content can be presented in the second column by wrapping it in a <div>.

[As a side-note: I use CSS to add the ':' that trails each label, as this is a stylistic element - my preference.]

/* CSS */

div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.settings label       { text-align:right; }
div.settings label:after { content: ":"; }

<!-- HTML -->

<div class="settings">
    <label>Label #1</label>
    <input type="text" />

    <label>Long Label #2</label>
    <span>Display content</span>

    <label>Label #3</label>
    <input type="text" />
</div>

edited Feb 07 '18 at 20:12

answered Jan 22 '18 at 16:43

David Rutherford

824
7
6

1

Hey, can you add a fiddle please? – Stan Jan 23 '18 at 10:54
Yes, I've updated the answer to make use of snippets. – David Rutherford Feb 07 '18 at 20:13
Which Chrome version and platform are you having problems with? – David Rutherford Feb 22 '18 at 12:34
2

Optimal Solution! Works fine now in Chrome 73. – Philipp Michalski Apr 24 '19 at 13:20
1

Awesome! If you replace the columns definition above with `grid-template-columns: max-content 1fr;`, the second column will use all remaining width. This to me is the holy grail of such layouts, where no column or content widths must be specified, and everything fits perfectly into the available space, automatically. – jeff-h Nov 29 '19 at 07:26
1

I'm sorry to vote that down since CSS grid remains a mere Candidate Recommendation draft; it's not so much "recent technology" as "future technology" which remains risky to adopt. – Philippe Cloutier Apr 27 '23 at 20:32

score 14 · Answer 3 · edited May 23 '17 at 11:47

Answered a question such as this before, you can take a look at the results here:

Creating form to have fields and text next to each other - what is the semantic way to do it?

So to apply the same rules to your fiddle you can use display:inline-block to display your label and input groups side by side, like so:

CSS

input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
    margin-left:20px
}

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 140px;
}

updated fiddle

This is a very nice solution, except for the fact that you must hard-code the width of the labels. If a new label is too long - the layout breaks. Seems like there should be a more robust solution? — mattstuehler, Feb 05 '19 at 01:03

score 10 · Answer 4 · answered Mar 13 '12 at 15:01

10

I use something similar to this:

<div class="form-element">
  <label for="foo">Long Label</label>
  <input type="text" name="foo" id="foo" />
</div>

Style:

.form-element label {
    display: inline-block;
    width: 150px;
}

answered Mar 13 '12 at 15:01

Mike G

758
6
18

The big problem with that approach is you're using a fixed width, which constantly needs reevaluation as labels change. – Philippe Cloutier Apr 27 '23 at 20:35

score 6 · Answer 5 · answered Jun 04 '19 at 00:28

6

I know this is an old thread but an easier solution would be to embed an input within the label like so:

<label>Label one: <input id="input1" type="text"></label>

answered Jun 04 '19 at 00:28

Robert

229
3
9

I was looking for a solution for this (include the input inside the label) but with aligned text – Natim Jul 24 '19 at 07:31
This doesn't respect the OP's requirement of alignment (unless all labels would have the same width). – Philippe Cloutier Apr 27 '23 at 21:08

score 5 · Answer 6 · edited Jan 23 '18 at 00:40

5

You can also try using flex-box

<head><style>
body {
    color:white;
    font-family:arial;
    font-size:1.2em;
}
form {
    margin:0 auto;
    padding:20px;
    background:#444;
}
.input-group {
    margin-top:10px;
    width:60%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
label, input {
    flex-basis:100px;
}
</style></head>
<body>

<form>
    <div class="wrapper">
        <div class="input-group">
            <label for="user_name">name:</label>
            <input type="text" id="user_name">
        </div>
        <div class="input-group">
            <label for="user_pass">Password:</label>
            <input type="password" id="user_pass">
        </div>
    </div>
</form>

</body>
</html>

edited Jan 23 '18 at 00:40

Cromax

1,822
1
23
35

answered Sep 05 '16 at 16:17

user6797117

51
1
1

That is pretty, but not at all what he asked for. See the picture in op – phorgan1 Mar 25 '17 at 17:37
The CSS Flexible Box Layout Module is merely a W3C Candidate Recommendation - using it may not be future-proof. – Philippe Cloutier Apr 27 '23 at 21:00

score 2 · Answer 7 · answered Aug 26 '19 at 21:43

You can do something like this:

HTML:

<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>

CSS:

.div{
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: 1fr 4fr;
}

.input{
       width: 50%;
}

Hope this helps ! :)

score 0 · Answer 8 · answered May 23 '19 at 17:19

Here is generic labels width for all form labels. Nothing fix width.

call setLabelWidth calculator with all the labels. This function will load all labels on UI and find out maximum label width. Apply return value of below function to all the labels.

     this.setLabelWidth = function (labels) {
            var d = labels.join('<br>'),
                dummyelm = jQuery("#lblWidthCalcHolder"),
                width;
            dummyelm.empty().html(d);
            width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
            width = width > 0 ? width + 5: width;
            //this.resetLabels(); //to reset labels.
            var element = angular.element("#lblWidthCalcHolder")[0];
            element.style.visibility = "hidden";
            //Removing all the lables from the element as width is calculated and the element is hidden
            element.innerHTML = "";
            return {
                width: width,
                validWidth: width !== 0
            };

        };

Align labels in form next to input

8 Answers8

Linked

Related