6

我正在使用以下 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/

4

2 回答 2

25

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

添加display: inline-block，它会工作。

小提琴

来自w3c 规范的 width 属性：

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

另外，请参阅此答案，该答案大致总结了未替换的内联元素-意味着：

可以包含诸如<a>, <span> <label>等文本的内联元素。

于 2013-10-07T22:51:56.463 回答
3

您需要使用 inline-block

display: inline-block;

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

此外，不要使用内联样式，而是使用Style Sheets。

于 2013-10-07T22:52:45.377 回答