如何控制标签的宽度?

The label tag doesn't have the property 'width', so how should I control the width of a label tag?

标签标签没有属性“宽度”，所以我应该如何控制标签标签的宽度?

6 个解决方案

#1

159

Using CSS, of course...

使用CSS,当然……

label { display: block; width: 100px; }

The width attribute is deprecated, and CSS should always be used to control these kinds of presentational styles.

宽度属性被弃用，CSS应该总是用来控制这些类型的显示样式。

#2

Using the inline-block is better because it doesn't force the remaining elements and/or controls to be drawn in a new line.

使用内联块更好，因为它不强制将其余的元素和/或控件绘制到新的行中。

label {
  width:200px;
  display: inline-block;
}

#3

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-block to 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

显示:块;使元素显示为一个实体块(如DIV标记)，这意味着在元素(它不是内联的)之后有一个换行符。虽然可以使用display: inline-block来修复换行问题，但是这个解决方案在IE6中并不适用，因为IE6不认识inline-block。如果您希望它是跨浏览器兼容的，那么请查看这篇文章:http://webjazz.blogspot.com/2008/01/gettinginline -block-work across.html。

#4

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.

给标签宽度不是正确的方法。您应该使用一个div或表结构来管理它。但是，如果您不想更改整个代码，那么您可以使用以下代码。

label {
  width:200px;
  float: left;
}

#5

label {
  width:200px;
  display: inline-block;
}

OR 

label {
  width:200px;
  display: inline-flex;
}

OR 

label {
  width:200px;
  display: inline-table;
}

#6

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;}

#1

159