Jak mogę kontrolować szerokość etykiety?

144

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

html css label ziiweb
źródło
8
Etykieta jest elementem wbudowanym, nie może mieć wartości szerokości; aby to zrobić, musisz wstawić display:blocklub float:left.
Russell Dias

Odpowiedzi:

188

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.

Josh Stodola
źródło
7
Ale to prowadzi do przerwy w kodzie, czego prawdopodobnie OP nie chce w pierwszej kolejności.
Konrad Rudolph
49
@Konrad Wtedy OP może użyć floatlubdisplay: inline-block
Josh Stodola
2
Tak, to właśnie chciałem osiągnąć. :-) To jest tutaj główny aspekt, ponieważ jest to trudna część. Samo ustawienie widthnie będzie miało większego znaczenia.
Konrad Rudolph
@JoshStodola oh shiiiiit ..... inline-block nigdy nie działał dla mnie, próbowałem float i bham! Zastanawiam się, dlaczego inline-block nie działa dla mnie
Dheeraj
@lostchild inline-block nie ignoruje białych znaków, może to być powód, dla którego masz z nim problemy.
Alex Podworny
91

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;
}
MA9H
źródło
29

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

Srka
źródło
4

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;
}
Yaxita Shah
źródło
„Nadawanie szerokości etykiecie w niewłaściwy sposób” kontrolowania szerokości elementu etykiety? Jesteś pewny?
Oriol
Tak .. Ponieważ kiedy chcemy stworzyć jakiś układ lub określoną strukturę, wtedy mamy do dyspozycji właściwości div i table. Etykieta nie jest przeznaczona do podawania szerokości ani wysokości ... więc jeśli użyjemy czegoś, co nie jest do tego przeznaczone ... zacznie w jakiś sposób tworzyć problemy. Mam nadzieję, że teraz mam sens.
Yaxita Shah
2 
label {
  width:200px;
  display: inline-block;
}

OR 

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

OR 

label {
  width:200px;
  display: inline-table;
}
błyszczący
źródło
1

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

.col-form-label{
  display: inline-block;
  width:200px;}
Akarsh Srivastava
źródło
0

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;}
Ajinkya
źródło