css label width not taking effect

Question

I have a generic form, which I'd like to style to align the labels and the input fields. For some reason when I give a width to the label selector, nothing happens:

HTML:

<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
    <p>
        <label for="id_title">Title:</label> 
        <input id="id_title" type="text" class="input-text" name="title"></p>
    <p>
        <label for="id_description">Description:</label> 
        <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
    <p>
        <label for="id_report">Upload Report:</label> 
        <input id="id_report" type="file" class="input-file" name="report">
    </p>
</form>

CSS:

#report-upload-form {
    background-color: #316091;
    color: #ddeff1;
    font-weight:bold;
    margin: 23px auto 0 auto;
    border-radius:10px;
    width: 650px;
    box-shadow:  0 0 2px 2px #d9d9d9;
}

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
}

#report-upload-form input[type=text], 
#report-upload-form input[type=file],
#report-upload-form textarea {
    width: 305px;
}

Output:

enter image description here

jsFiddle

What am I doing wrong?

By the way, is wrapping the form sections in `
` tags really a good idea? — JGallardo, Jan 27 '14 at 22:56

score 246 · Accepted Answer · edited Sep 29 '16 at 21:09

246

Do display: inline-block:

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
    display:inline-block
}

http://jsfiddle.net/aqMN4/

edited Sep 29 '16 at 21:09

Nisse Engström

4,738
23
27
42

answered May 30 '12 at 13:06

Davis

2,937
3
18
28

1

Stick with Inline-block. Tested it in IE7,IE8,IE9, FF – Davis May 30 '12 at 13:14
1

Is there a workaround to placing each element in a
?
– Colin D Mar 09 '16 at 22:59
1

@ColinD I would recommend using divs, not
tags.
– Davis Jul 07 '16 at 17:35

jeffjenx · Answer 2 · 2016-05-26T19:39:07.107

45

Use display: inline-block;

Explanation:

The label is an inline element, meaning it is only as big as it needs to be.

Set the display property to either inline-block or block in order for the width property to take effect.

Example:

#report-upload-form {
    background-color: #316091;
    color: #ddeff1;
    font-weight: bold;
    margin: 23px auto 0 auto;
    border-radius: 10px;
    width: 650px;
    box-shadow: 0 0 2px 2px #d9d9d9;

}

#report-upload-form label {
    padding-left: 26px;
    width: 125px;
    text-transform: uppercase;
    display: inline-block;
}

#report-upload-form input[type=text], 
#report-upload-form input[type=file],
#report-upload-form textarea {
    width: 305px;
}

<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
    <p><label for="id_title">Title:</label> <input id="id_title" type="text" class="input-text" name="title"></p>
    <p><label for="id_description">Description:</label> <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
    <p><label for="id_report">Upload Report:</label> <input id="id_report" type="file" class="input-file" name="report"></p>
</form>

edited May 26 '16 at 19:39

answered May 30 '12 at 13:05

jeffjenx

17,041
6
57
99

1

Thanks! inline-block is what I needed. Block makes it look weird. – TheOne May 30 '12 at 13:07
2

Be aware that inline-block's support is sketchy in IE below IE8 - probably not too much of a problem these days, but something to keep in mind. (source http://www.quirksmode.org/css/display.html) – n00dle May 30 '12 at 13:15
1

@PandaWood Sorry it's almost 2 years since you commented on this post. But, I am replying to your comment so that other readers are not misguided by the explanation given by the author of this post. The latter has reasoned that the `label` element doesn't respect the `width` property because it's an inline element. I would like to point out that the `input` element is also an inline element by default. But it allows its width to be changed using the width property unlike the `label` element. Hence the reasoning by the author is not correct. – ghd Aug 17 '16 at 16:57

score 6 · Answer 3 · answered May 30 '12 at 13:05

6

I believe labels are inline, and so they don't take a width. Maybe try using "display: block" and going from there.

answered May 30 '12 at 13:05

Mike

2,132
3
20
33

score 6 · Answer 4 · edited Sep 29 '16 at 21:11

6

Make it a block first, then float left to stop pushing the next block in to a new line.

#report-upload-form label {
                           padding-left:26px;
                           width:125px;
                           text-transform: uppercase;
                           display:block;
                           float:left
}

edited Sep 29 '16 at 21:11

Nisse Engström

4,738
23
27
42

answered May 30 '12 at 13:09

ctrl-alt-dileep

2,066
1
16
14

score 5 · Answer 5 · answered May 30 '12 at 13:05

5

give the style

display:inline-block;

hope this will help'

answered May 30 '12 at 13:05

Philemon philip Kunjumon

1,417
1
15
34

score 4 · Answer 6 · answered May 30 '12 at 13:05

4

label's default display mode is inline, which means it automatically sizes itself to it's content. To set a width you'll need to set display:block and then do some faffing to get it positioned correctly (probably involving float)

answered May 30 '12 at 13:05

n00dle

5,949
2
35
48

score 1 · Answer 7 · answered Apr 14 '21 at 02:36

1

   label
    {
    display: inline-block;
    }

will give you the flexibility to change the width of the labels and custom align the form. cheers

answered Apr 14 '21 at 02:36

Ash Sharma

31
6

css label width not taking effect

7 Answers7

Linked

Related