CODEWITHSUNDEEP
css
TimeToCodeTheRoad
TimeToCodeTheRoad

Reputation: 7322

CSS width: not working in label

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>

Upvotes: 0

Views: 3923

Answers (6)

Sajid Mehmood
Sajid Mehmood

Reputation: 533

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

Upvotes: 0

sansan
sansan

Reputation: 833

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>

Upvotes: 1

Arun Redhu
Arun Redhu

Reputation: 1579

just add one more style to label as per your requirement

display: "inline-block"

or

display: "block"

Upvotes: 0

iyyappan
iyyappan

Reputation: 777

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

Upvotes: 0

Vinaysingh Khetwal
Vinaysingh Khetwal

Reputation: 121

Use Padding instead of width

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

Upvotes: 0

Soykot
Soykot

Reputation: 138

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%

Upvotes: 0

Related Questions