Html 如何控制标签标签的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2820586/
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 can I control the width of a label tag?
提问by ziiweb
The label tag doesn't have the property 'width', so how should I control the width of a label tag?
标签标签没有“宽度”属性，那么我应该如何控制标签标签的宽度？
回答by Josh Stodola
Using CSS, of course...
使用 CSS，当然...
label { display: block; width: 100px; }
The widthattribute is deprecated, and CSS should always be used to control these kinds of presentational styles.
该width属性已弃用，应始终使用 CSS 来控制这些类型的表现样式。
回答by MA9H
Using the inline-block is better because it doesn't force the remaining elements and/or controls to be drawn in a new line.
使用 inline-block 更好，因为它不会强制将剩余的元素和/或控件绘制在新行中。
label {
width:200px;
display: inline-block;
}
回答by Srka
Inline elements (like SPAN, LABEL, etc.) are displayed so that their height and width are calculated by the browser based on their content. If you want to control height and width you have to change those elements' blocks.
显示内联元素（如 SPAN、LABEL 等），以便浏览器根据其内容计算其高度和宽度。如果要控制高度和宽度，则必须更改这些元素的块。
display: block;makes the element displayed as a solid block (like DIV tags) which means that there is a line break after the element (it's not inline). Although you can use display: inline-blockto fix the issue of line break, this solution does not work in IE6 because IE6 doesn't recognize inline-block. If you want it to be cross-browser compatible then look at this article: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html
display: block;使元素显示为实心块（如 DIV 标签），这意味着元素后面有一个换行符（它不是内联的）。虽然您可以使用它display: inline-block来修复换行符的问题，但该解决方案在 IE6 中不起作用，因为 IE6 无法识别 inline-block。如果您希望它跨浏览器兼容，请查看这篇文章：http: //webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html
回答by Yaxita Shah
Giving width to Label is not a proper way. you should take one div or table structure to manage this. but still if you don't want to change your whole code then you can use following code.
为 Label 提供宽度不是一种正确的方法。你应该用一个 div 或 table 结构来管理这个。但是如果您不想更改整个代码，那么您可以使用以下代码。
label {
width:200px;
float: left;
}
回答by shiny
label {
width:200px;
display: inline-block;
}
OR
label {
width:200px;
display: inline-flex;
}
OR
label {
width:200px;
display: inline-table;
}
回答by Akarsh Srivastava
You can definitely try this way
你绝对可以试试这种方式
.col-form-label{
display: inline-block;
width:200px;}
回答by Ajinkya
You can either give class name to all label so that all can have same width :
您可以为所有标签提供类名，以便所有标签都具有相同的宽度：
.class-name { width:200px;}
Example
例子
.labelname{ width:200px;}
or you can simple give rest of label
或者你可以简单地给出其余的标签
label { width:200px; display: inline-block;}
