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

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
источник