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

Question

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

宽度属性不适用于非替换内联元素(例如 label )。

添加display: inline-block它将起作用。

FIDDLE

来自w3c spec on the width property :

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

另请参阅 this answer这大致总结了 非替换 内联元素 - 意味着:

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