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


144

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


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

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


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


0

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

 .class-name {  width:200px;}

пример

.labelname{  width:200px;}

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

label {  width:200px;  display: inline-block;}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.