Come posso controllare la larghezza di un tag etichetta?

144

Il tag label non ha la proprietà 'width', quindi come devo controllare la larghezza di un tag label?

html css label

— ziiweb
fonte

8

L'etichetta è un elemento incorporato, non può avere un valore di larghezza; per fare questo devi mettere display:blocko float:left.

— Russell Dias,

188

Utilizzando CSS, ovviamente ...

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

L' widthattributo è deprecato e CSS dovrebbe sempre essere usato per controllare questo tipo di stili di presentazione.

— Josh Stodola
fonte

7

Ma ciò porta a una rottura del codice, che è probabilmente ciò che l'OP non vuole in primo luogo.

— Konrad Rudolph,

49

@Konrad Quindi l'OP può usare floatodisplay: inline-block

— Josh Stodola

2

Sì, è quello che volevo ottenere. :-) Questo è l'aspetto fondamentale qui, dal momento che è la parte difficile. La semplice impostazione widthnon sarà molto utile.

— Konrad Rudolph,

@JoshStodola oh shiiiiit ..... inline-block non ha mai funzionato per me, ho provato float e bham! mi chiedo perché il blocco inline non ha funzionato per me

— Dheeraj,

@lostchild inline-block non ignora gli spazi bianchi, questo potrebbe essere il motivo per cui hai avuto problemi con esso.

— Alex Podworny,

91

L'uso del blocco inline è migliore perché non forza gli elementi e / o i controlli rimanenti a essere tracciati in una nuova linea.

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

— MA9H
fonte

29

Gli elementi incorporati (come SPAN, LABEL, ecc.) Vengono visualizzati in modo tale che la loro altezza e larghezza vengano calcolate dal browser in base al loro contenuto. Se vuoi controllare l'altezza e la larghezza devi cambiare i blocchi di quegli elementi.

display: block;rende l'elemento visualizzato come un blocco solido (come i tag DIV), il che significa che c'è un'interruzione di riga dopo l'elemento (non è in linea). Sebbene sia possibile utilizzare display: inline-blockper risolvere il problema dell'interruzione di linea, questa soluzione non funziona in IE6 perché IE6 non riconosce il blocco in linea. Se vuoi che sia compatibile con più browser, guarda questo articolo: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

— Srka
fonte

4

Dare larghezza a Etichetta non è un modo corretto. dovresti prendere una struttura div o tabella per gestirlo. ma comunque se non vuoi cambiare l'intero codice, puoi usare il seguente codice.

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

— Yaxita Shah
fonte

"Dare larghezza all'etichetta in modo non corretto" per controllare la larghezza di un elemento etichetta? Sei sicuro?

— Oriol,

Sì. Perché quando vogliamo creare un layout o una struttura specifica, vengono fornite le proprietà div e table da utilizzare. L'etichetta non è pensata per dare larghezza o altezza .. quindi se usiamo qualcosa che non è pensato per farlo .. inizierà a creare problemi in qualche modo. Spero di avere un senso adesso.

— Yaxita Shah,

2

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

OR 

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

OR 

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

— brillante
fonte

1

Puoi assolutamente provare in questo modo

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

— Akarsh Srivastava
fonte

0

Puoi dare il nome della classe a tutte le etichette in modo che tutti possano avere la stessa larghezza:

 .class-name {  width:200px;}

Esempio

.labelname{  width:200px;}

oppure puoi semplicemente dare il resto dell'etichetta

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

— Ajinkya
fonte