CSS width: not working in label

Question

I have written a simple form to test out the width in CSS. Regardless of the value I put for width, the borders still have the same width. Can somebody please help what am I missing?

<html  lang="en-US">
  <meta charset="UTF-8">
    <head>
      <style type="text/css">
        label {  
          width: 10em;  
          border-color: brown;  
          border-width: .25em;  
          border-style: double;  
          margin-right: .5em;      
        }
      </style>  
      <title>Trying CSS </title>  
    </head>  

    <body>
      <form  action="#">  
        <fieldset  >  
          <label> Name </label>  
          <input type="text"/>  
          <label  >Contact</label>  
          <input type="text" />  
          <label >Phone</label>  
          <input  type="text" />  
          <button type="button">Submit </button>  
        </fieldset>  
      </form>
    </body>
 </html>

Possible duplicate of [How can I control the width of a label tag?](http://stackoverflow.com/questions/2820586/how-can-i-control-the-width-of-a-label-tag) — Deepak Yadav, Mar 09 '17 at 05:56
The label tag is `display: inline;` as default, so width will have no working on it. You can set it with: `display: inline-block;` or `display: block;` to make width work. `position: absolute|fixed`, `float: left|right` can also make it work, but only use them when you know you need it. — shuizhongyuemin, Mar 09 '17 at 06:44

score 1 · Accepted Answer · answered Mar 09 '17 at 05:57

1

Use this css

label {  
width: 10em;  
border-color: brown;  
border-width: .25em;  
border-style: double;  
margin-right: .5em;      
float:left;
}
input{float:left;}

<!DOCTYPE HTML>
<!--Inform the Browser that the document is HTML-->
<html  lang="en-US">
<head>
<meta charset="UTF-8">
<head>
<style type="text/css">
label {  
width: 10em;  
border-color: brown;  
border-width: .25em;  
border-style: double;  
margin-right: .5em;      
float:left;
}
input{float:left;}
</style>  
<title>Trying CSS </title>  
</head>  
<body>
<form  action="#">  
<fieldset  >  
<label> Name </label>  
<input type="text"/>  
<label  >Contact</label>  
<input type="text" />  
<label >Phone</label>  
<input  type="text" />  
<button type="button">Submit </button>  
</fieldset>  
</form>
</body>
</html>

answered Mar 09 '17 at 05:57

sansan

783
1
6
21

why did you add the float: left? I am also keen to understand why the width in itself is not working – TimeToCodeTheRoad Mar 09 '17 at 06:14
2

The Label element is defaulted to inline display mode.Inline elements don't accept a width property – sansan Mar 09 '17 at 06:20
don't want float:left you can use display:block – sansan Mar 09 '17 at 06:21
great, also does adding float change it to a block-like display? I understand how adding display: block helps – TimeToCodeTheRoad Mar 09 '17 at 06:31
accepted, can you please let me know why float also makes it work? – TimeToCodeTheRoad Mar 09 '17 at 06:58
float:left will collapse the default inline state – sansan Mar 09 '17 at 07:21

score 0 · Answer 2 · answered Mar 09 '17 at 05:43

0

Basically label is a tag. So what you should try is put a class inside the label tag and then write css for that . and for width try-- width=100%

answered Mar 09 '17 at 05:43

Soykot

138
1
9

score 0 · Answer 3 · answered Mar 09 '17 at 05:47

0

Use Padding instead of width

label {  
padding: 0 55px;  
border-color: brown;  
border-width: .5em;  
border-style: double;  
margin-right: .5em;      
}

answered Mar 09 '17 at 05:47

Vinaysingh Khetwal

121
1
7

score 0 · Answer 4 · answered Mar 09 '17 at 05:48

<div class="labelborder">
     <label>sample text</label>
</div>
.labelborder {  
width: 10em;  
border-color: brown;  
border-width: .25em;  
border-style: double;  
margin-right: .5em;      
}

If label width accessing according to font-size only,if you want to increase without increasing font size,use above code like that,

score 0 · Answer 5 · answered Mar 09 '17 at 05:49

0

just add one more style to label as per your requirement

display: "inline-block"

or

display: "block"

answered Mar 09 '17 at 05:49

Arun Redhu

1,584
12
16

score 0 · Answer 6 · answered Mar 09 '17 at 06:21

0

Simply add display:inline-block to the label to give width

answered Mar 09 '17 at 06:21

Sajid Mehmood

483
2
6
18

CSS width: not working in label

6 Answers6