CODEWITHSUNDEEP
htmlcss
Om3ga
Om3ga

Reputation: 32853

form label does not get width in css

I have an HTML form [here][1]. I am setting label's display to inline and width to 200px but it does not get the width. How can I give width so that it takes it?

Here is my form

<form>
<div>
    <label>Name</label>
    <input type="text" />
    <label>Organization</label>
    <input type="text" />
</div>
<div>
    <label>E-mail</label>
    <input type="text" />
    <label>Phone</label>
    <input type="text" />
</div>
</form>

And the CSS:

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

Upvotes: 2

Views: 672

Answers (5)

Ana
Ana

Reputation: 37179

You cannot give a width to an inline element. You have to set its display to inline-block if you want it to be inline and have a width.

Changing your CSS to

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

makes it work.

live demo: http://dabblet.com/gist/3149758

Upvotes: 5

SVS
SVS

Reputation: 4275

Anyways label is already a inline elements so there is no use of setting style to display:inline;.

if you want to add width first make the element a block element. you can do this by using display:inline-block or use display:block; & float:left;

Fiddle demo: http://jsfiddle.net/surendraVsingh/eZH5C/1/

Upvotes: 0

Jayaraj P R
Jayaraj P R

Reputation: 49

Please use this. 

label {

    width: 200px ;
    display:inline;
    float:left;
}
​input[type="text"]{
    float:left;
}​

Upvotes: 0

Scott
Scott

Reputation: 21882

The inline property won't read width. You need to use display: block; or display: inline-block; for the width to be read.

Upvotes: 1

Quentin
Quentin

Reputation: 943561

The width property does not apply to inline, non-replaced elements.

Don't set the display to inline. You might like inline-block instead.

Upvotes: 2

Related Questions