CODEWITHSUNDEEP
htmlcsslabel
tirenweb
tirenweb

Reputation: 31749

How can I control the width of a label tag?

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

Upvotes: 166

Views: 357583

Answers (9)

joyce_ann
joyce_ann

Reputation: 1

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.

Upvotes: 0

ghiles ybeggazene
ghiles ybeggazene

Reputation: 275

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

Upvotes: 0

Akarsh Srivastava
Akarsh Srivastava

Reputation: 141

You can definitely try this way 

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

Upvotes: 4

MA9H
MA9H

Reputation: 1909

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

Upvotes: 115

3338_SON
3338_SON

Reputation: 35

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

Upvotes: 0

Yaxita Shah
Yaxita Shah

Reputation: 1228

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

Upvotes: 0

Srka
Srka

Reputation: 363

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

Upvotes: 29

shiny
shiny

Reputation: 124

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

OR 

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

OR 

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

Upvotes: 2

Josh Stodola
Josh Stodola

Reputation: 82523

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.

Upvotes: 214

Related Questions