Jak mogę kontrolować szerokość etykiety?

Znacznik etykiety nie ma właściwości „width”, więc jak mam kontrolować szerokość tagu etykiety?

Oczywiście używając CSS ...

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

Ten widthatrybut jest przestarzały, a do kontrolowania tego rodzaju stylów prezentacji należy zawsze używać CSS.

Użycie bloku inline jest lepsze, ponieważ nie wymusza rysowania pozostałych elementów i / lub kontrolek w nowej linii.

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

Elementy wbudowane (takie jak SPAN, LABEL itp.) Są wyświetlane w taki sposób, że ich wysokość i szerokość są obliczane przez przeglądarkę na podstawie ich zawartości. Jeśli chcesz kontrolować wysokość i szerokość, musisz zmienić bloki tych elementów.

display: block;powoduje, że element jest wyświetlany jako jednolity blok (jak znaczniki DIV), co oznacza, że ​​po elemencie występuje koniec wiersza (nie jest on w wierszu). Chociaż możesz użyć display: inline-blockdo rozwiązania problemu z podziałem wiersza, to rozwiązanie nie działa w IE6, ponieważ IE6 nie rozpoznaje wbudowanego bloku. Jeśli chcesz, aby była kompatybilna z różnymi przeglądarkami, przeczytaj ten artykuł: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

Nadanie szerokości Label nie jest właściwym sposobem. aby sobie z tym poradzić, należy wziąć jeden element div lub strukturę tabeli. ale nadal, jeśli nie chcesz zmieniać całego kodu, możesz użyć następującego kodu.

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

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

OR 

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

OR 

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

Zdecydowanie możesz spróbować w ten sposób

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

Możesz albo nadać nazwę klasy wszystkim etykietom, aby wszystkie miały tę samą szerokość:

 .class-name {  width:200px;}

Przykład

.labelname{  width:200px;}

lub możesz po prostu podać resztę etykiety

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