163

The label tag doesn't have the property 'width', so how should I control the width of a label tag?

1
  • 8
    Label is an inline element, it cannot have width value; in order to do this you need to put display:block or float:left. May 12, 2010 at 16:10

9 Answers 9

212

Using CSS, of course...

label { display: block; width: 100px; }

The width attribute is deprecated, and CSS should always be used to control these kinds of presentational styles.

5
  • 7
    But that leads to a break in the code, which is probably what the OP doesn’t want in the first place. May 12, 2010 at 16:07
  • 54
    @Konrad Then the OP can use float or display: inline-block May 12, 2010 at 16:08
  • 2
    Yup, that’s what I wanted to get at. :-) This is the core aspect here, since it’s the difficult part. Merely setting width won’t have much use. May 12, 2010 at 21:12
  • @JoshStodola oh shiiiiit..... inline-block never used to work for me, i tried float and bham! i wonder why inline-block did't work for me Aug 25, 2015 at 11:35
  • @lostchild inline-block does not ignore whitespace, that might be why you were having issues with it. Apr 19, 2016 at 15:05
113

Using the inline-block is better because it doesn't force the remaining elements and/or controls to be drawn in a new line.

label {
  width:200px;
  display: inline-block;
}
29

Inline elements (like SPAN, LABEL, etc.) are displayed so that their height and width are calculated by the browser based on their content. If you want to control height and width you have to change those elements' blocks.

display: block; makes the element displayed as a solid block (like DIV tags) which means that there is a line break after the element (it's not inline). Although you can use display: inline-block to fix the issue of line break, this solution does not work in IE6 because IE6 doesn't recognize inline-block. If you want it to be cross-browser compatible then look at this article: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

4

You can definitely try this way

.col-form-label{
  display: inline-block;
  width:200px;}
2
label {
  width:200px;
  display: inline-block;
}

OR 

label {
  width:200px;
  display: inline-flex;
}

OR 

label {
  width:200px;
  display: inline-table;
}
0

Giving width to Label is not a proper way. you should take one div or table structure to manage this. but still if you don't want to change your whole code then you can use following code.

label {
  width:200px;
  float: left;
}
2
  • "Giving width to Label in not a proper way" of controlling the width of a label element? Are you sure?
    – Oriol
    Aug 10, 2015 at 14:06
  • Yes .. Because when we want to create some layout or specific structure then div and table properties are provided to use. Label is not meant for giving width or height .. so if we use something which is not meant to do so .. it will start creating issues in some manner. I hope i am making sense now. Aug 10, 2015 at 14:13
0

You can either give class name to all label so that all can have same width :

 .class-name {  width:200px;}

Example

.labelname{  width:200px;}

or you can simple give rest of label

label {  width:200px;  display: inline-block;}
0
<style type="text/css">
    .princip{
        height: 190px ;
        width:190px ;
        border:  solid;
    }
    label{
        height: 190px !important;
        width:190px  !important;
        border:  solid;
        display: block;
    }
 </style>

    <div class="princip"  id="princip">
    
    
    <input id="rad1" type="radio" name="rad"/>
    
    <label class="lbl" id="lbl" for="rad1">
    
        <h1>fdgb</h1>
    <h2>sdfs</h2>
    </label>
    
    </div>
0

Using CSS

label { display: block; width: 100px; } The width attribute is deprecated, and CSS should always be used to control these kinds of presentational styles.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.