CODEWITHSUNDEEP
htmlcss
1.21 gigawatts
1.21 gigawatts

Reputation: 17880

How to set the width of a label in HTML?

I'm using the following HTML code to create a form but the width of the "phone" label seems to be ignored no matter what I set it to. I've set it explicitly to 50px.

enter image description here

<div name="VGroup968" style="position:absolute;left:36px;top:54px;width:380px;height:166px;">
    <div style="padding-bottom:6px"><div name="HGroup568" style="width:180px;height:23px;">
        <div style="display:inline;padding-right:2px"><label name="Label589" style="position:relative;vertical-align: middle;width:50px;height:12px;font-family:Arial;font-size:12px;">Phone</label></div>
        <div style="display:inline;"><input type="input" name="TextInput547" style="width:120px;height:22px;font-family:Arial;font-size:12px;padding:0;border:1px solid #696969;"/></div>
    </div></div>
    <div style="padding-bottom:6px"><div name="HGroup616" style="width:180px;height:23px;">
        <div style="display:inline;padding-right:2px"><label name="Label665" style="position:relative;vertical-align: middle;width:50px;height:12px;font-family:Arial;font-size:12px;">Message</label></div>
        <div style="display:inline;"><input type="input" name="TextInput554" style="width:120px;height:22px;font-family:Arial;font-size:12px;padding:0;border:1px solid #696969;"/></div>
    </div></div>

Is there something I'm missing? http://jsfiddle.net/EsdQB/1/

Upvotes: 6

Views: 47641

Answers (2)

Danield
Danield

Reputation: 125651

The width property does not apply to non-replaced inline elements (such as label).

Add display: inline-block and it will work.

FIDDLE

From the w3c spec on the width property:

Applies to: all elements but non-replaced inline elements, table rows, and row groups

Also, see this answer which roughly sums up that non-replaced inline elements - means:

inline elements that can contain text like <a>, <span> <label> etc.

Upvotes: 25

Nikita Silverstruk
Nikita Silverstruk

Reputation: 1117

You need to use inline-block

display: inline-block;

http://jsfiddle.net/EsdQB/5/

Also, instead of inline styling, use Style Sheets.

Upvotes: 3

Related Questions