Question

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

Answer 1

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