Как я могу контролировать ширину метки?

144

Тег label не имеет свойства width, так как я должен контролировать ширину тега label?

html css label ziiweb
источник
8
Метка является встроенным элементом, она не может иметь значение ширины; для этого нужно поставить display:blockили float:left.
Рассел Диас

Ответы:

188

Используя CSS, конечно ...

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

widthАтрибут является устаревшим, и CSS всегда должен быть использован для управления этих видов презентационных стилей.

Джош Стодола
источник
7
Но это приводит к разрыву в коде, который, вероятно, и не нужен ОП .
Конрад Рудольф
49
@Konrad Тогда ОП может использовать floatилиdisplay: inline-block
Джош Стодола
2
Да, это то, что я хотел получить. :-) Это основной аспект здесь, так как это сложная часть. Простая настройка widthне будет иметь большого смысла.
Конрад Рудольф
@JoshStodola о шииииит ..... встроенный блок никогда не работал для меня, я пробовал float и bham! мне интересно, почему встроенный блок не работает для меня
Dheeraj
@lostchild inline-block не игнорирует пробелы, поэтому может возникнуть проблема с ним.
Алекс Подворный
91

Использование встроенного блока лучше, потому что он не заставляет остальные элементы и / или элементы управления рисоваться в новой линии.

label {
  width:200px;
  display: inline-block;
}
MA9H
источник
29

Встроенные элементы (такие как SPAN, LABEL и т. Д.) Отображаются так, что их высота и ширина рассчитываются браузером на основе их содержимого. Если вы хотите контролировать высоту и ширину, вы должны изменить блоки этих элементов.

display: block;делает элемент отображаемым как сплошной блок (например, теги DIV), что означает, что после элемента есть разрыв строки (он не встроен). Хотя вы можете использовать это, display: inline-blockчтобы решить проблему с разрывом строки, это решение не работает в IE6, потому что IE6 не распознает inline-block. Если вы хотите, чтобы он был совместим с разными браузерами, посмотрите эту статью: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

Srka
источник
4

Давать ширину метке - неправильный способ. Вы должны взять один div или структуру таблицы, чтобы справиться с этим. но все же, если вы не хотите менять весь свой код, вы можете использовать следующий код.

label {
  width:200px;
  float: left;
}
Яксита Шах
источник
«Неправильно задавать ширину для метки» контроля ширины элемента метки? Ты уверен?
Ориоль
Да. Потому что, когда мы хотим создать какой-то макет или конкретную структуру, тогда предоставляются свойства div и table. Метка не предназначена для указания ширины или высоты ... поэтому, если мы используем что-то, что не предназначено для этого ... она начнет каким-то образом создавать проблемы. Надеюсь, теперь я понимаю.
Яксита Шах
2 
label {
  width:200px;
  display: inline-block;
}

OR 

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

OR 

label {
  width:200px;
  display: inline-table;
}
блестящий
источник
1

Вы можете определенно попробовать этот путь 

.col-form-label{
  display: inline-block;
  width:200px;}
Акарш Шривастава
источник
0

Вы можете либо дать имя класса всем меткам, чтобы все могли иметь одинаковую ширину:

 .class-name {  width:200px;}

пример 

.labelname{  width:200px;}

или вы можете просто дать остальную часть этикетки 

label {  width:200px;  display: inline-block;}
Ajinkya
источник