如何控制标签的宽度？

144

标签标签没有属性'width'，那么我应该如何控制标签标签的宽度？

html css label

— ziiweb
source

8

Label是一个内联元素，不能具有width值；为了做到这一点，你需要把display:block或float:left。

— 罗素·迪亚斯

188

当然，使用CSS ...

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

width不推荐使用该属性，并且应始终使用CSS来控制这些类型的表示样式。

— 乔什·斯托多拉
source

7

但这导致代码中断，这可能是OP 首先不希望的。

— 康拉德·鲁道夫

49

@Konrad那么OP可以使用float或display: inline-block

— 乔什斯托多拉

2

是的，这就是我想要了解的。:-)这是这里的核心方面，因为这是困难的部分。仅仅设置width不会有太多用处。

— 康拉德·鲁道夫

@JoshStodola哦，shiiiiit .....内联块从不为我工作，我尝试了float和bham！我想知道为什么inline-block对我不起作用

— Dheeraj

@lostchild inline-block不会忽略空格，这可能就是您遇到问题的原因。

— Alex Podworny '16

91

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

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

— MA9H
source

29

显示内联元素（例如SPAN，LABEL等），以便浏览器根据其内容计算其高度和宽度。如果要控制高度和宽度，则必须更改这些元素的块。

display: block;使元素显示为实心块（如DIV标签），这意味着元素后有换行符（不是内联）。尽管您可以使用它display: inline-block来解决换行问题，但是此解决方案在IE6中不起作用，因为IE6无法识别行内阻塞。如果您希望它与跨浏览器兼容，请查看此文章：http : //webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

— 斯卡
source

4

给Label设置宽度不是正确的方法。您应该采用一个div或表结构来管理这一点。但是，如果您不想更改整个代码，则可以使用以下代码。

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

— Yaxita Shah
source

控制标签元素宽度的“以不适当的方式给标签提供宽度”？你确定吗？

— Oriol

是的..因为当我们要创建某些布局或特定结构时，可以使用div和table属性。标签不是为了提供宽度或高度..因此，如果我们使用的不是目的，那么它将开始以某种方式产生问题。我希望我现在有道理。

— Yaxita Shah 2015年

2

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

OR 

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

OR 

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

— 闪亮的
source

1

你绝对可以这样尝试

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

— 阿卡什·斯里瓦斯塔瓦（Akarsh Srivastava）
source

0

您可以为所有标签指定类名，以便所有标签都可以具有相同的宽度：

 .class-name {  width:200px;}

例

.labelname{  width:200px;}

或者您可以简单地给其余标签

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

— Ajinkya
source