如何在HTML中设置标签的宽度？

Question

我正在使用以下HTML代码创建表单，但无论我将其设置为什么，“phone”标签的宽度似乎都会被忽略。我已将其明确设置为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>

有什么我想念的吗？ http://jsfiddle.net/EsdQB/1/

Answer 1

width属性不适用于未替换的内联元素（例如label）。

添加display: inline-block即可。

FIDDLE

来自w3c spec on the width property：

  

适用于：所有元素，但未替换的内联元素，表   行和行组

另外，请参阅this answer，其中大致总结了未替换的内联元素 - 表示：

可以包含<a>, <span> <label>等文字的内联元素

Answer 2

您需要使用内联块

display: inline-block;

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

此外，使用Style Sheets。

，而不是内联样式