如何在 HTML 中设置标签的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19236146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the width of a label in HTML?
提问by 1.21 gigawatts
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.
我正在使用以下 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>
Is there something I'm missing? http://jsfiddle.net/EsdQB/1/
有什么我想念的吗？ http://jsfiddle.net/EsdQB/1/
回答by Danield
The width property does not apply to non-replaced inline elements (such as label).
width 属性不适用于不可替换的内联元素（例如label）。
Add display: inline-blockand it will work.
添加display: inline-block它会起作用。
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 answerwhich roughly sums up that non-replacedinline elements - means:
另外，请参阅此答案，该答案粗略总结了未替换的内联元素 - 意味着：
inline elements that can contain text like <a>, <span> <label>etc.
可以包含文本<a>, <span> <label>等的内联元素。
回答by Nikita Silverstruk
You need to use inline-block
您需要使用内联块
display: inline-block;
Also, instead of inline styling, use Style Sheets.
此外，不要使用内联样式，而是使用样式表。
