How to set label width in HTML?

Question

I use the following HTML to create the form, but the width of the phone shortcut seems to be ignored, no matter what I set it for. I installed it explicitly 50px.

<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 am missing? http://jsfiddle.net/EsdQB/1/

Answer 1

The width property does not apply to non-replaceable inline elements (for example, label ).

Add display: inline-block and it will work.

Fiddle

From w3c spec in width property :

Applies to: all elements but not replaced by inline elements, table of rows and row groups

Also see this answer , which roughly summarizes that non-replaceable inline elements - means:

inline elements that may contain text such as <a>, <span> <label> , etc.

Answer 2

You need to use the built-in unit

 display: inline-block; 

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

In addition, use the Style Sheets instead of the inline style.