larghezza: auto per i campi <input>

122

Domanda CSS per principianti. Pensavo width:autoche un display:blockelemento significasse "riempire lo spazio disponibile". Tuttavia per un <input>elemento questo non sembra essere il caso. Per esempio:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

Due domande quindi:

Esiste una definizione di esattamente cosa significa larghezza: auto? Le specifiche CSS mi sembrano vaghe, ma forse ho perso la sezione pertinente.
C'è un modo per ottenere il mio comportamento previsto per un campo di input, ad es. riempire lo spazio disponibile come fanno gli altri elementi a livello di blocco?

Grazie!

css

— richb
fonte

possibile duplicato di ingresso con display: il blocco non è un blocco, perché no?

— Phrogz

@Phrogz Sì, è un duplicato. Ho cercato ma non l'ho trovato. Grazie.

— richb

88

Un <input>'s larghezza è generato dal suo sizeattributo. Il predefinitosize è ciò che determina la larghezza automatica.

Potresti provare width:100% come illustrato nel mio esempio qui sotto.

Non riempie la larghezza:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Larghezza riempimenti:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Dimensioni ridotte, larghezza ridotta:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

AGGIORNARE

Ecco il meglio che ho potuto fare dopo pochi minuti. È 1 pixel di sconto in FF, Chrome e Safari e perfetto in IE. (Il problema è che # ^ & * IE applica i bordi in modo diverso rispetto a tutti gli altri, quindi non è coerente.)

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

— Ben
fonte

24

Grazie. larghezza: 100% non è la stessa cosa però. Se sono presenti margini o un bordo, il riquadro principale sarà in overflow.

— richb

1

Puoi impostarli esplicitamente per regolare come desideri, ad es border:2px inset #eee; margin:-2px. Non l'ho provato io stesso, ma qualcosa del genere.

— Ben

3

Grazie Steve. Dovresti anche controllare stackoverflow.com/questions/1030793/… che contiene altre idee interessanti.

— richb

1

Soluzione epica per larghezze coerenti tramite CSS sui campi di input, +1

— Stephen Sprinkle

11

puoi usare set la proprietà input box-sizing su border-box per impedire che il bordo si sovrapponga al contenitore.

— nicholas

26

"Esiste una definizione di cosa significa esattamente larghezza: auto? Le specifiche CSS mi sembrano vaghe, ma forse ho perso la sezione pertinente."

Nessuno in realtà ha risposto alla parte precedente della domanda del poster originale.

Ecco la risposta: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Fintanto che il valore di larghezza è auto, l'elemento può avere margine orizzontale, padding e bordo senza diventare più largo del suo contenitore ...

D'altra parte, se specifichi larghezza: 100%, la larghezza totale dell'elemento sarà il 100% del suo blocco contenitore più qualsiasi margine orizzontale, riempimento e bordo ... Questo potrebbe essere quello che vuoi, ma molto probabilmente non lo è .

Per visualizzare la differenza ho fatto un esempio: http://www.456bereastreet.com/lab/width-auto/

— risposta
fonte

4

bella risposta / link, suggerisco di mettere un terzo esempio con "box-sizeing: border-box" ...

— halfbit

non è per un input e poiché auto è l'impostazione predefinita, non vedo come sia utile

— Barbz_YHOOL

9

Come affermato nell'altra risposta, width: auto non funziona a causa della larghezza generata dall'attributo size dell'input, che non può essere impostato su "auto" o qualcosa di simile.

Ci sono alcune soluzioni alternative che puoi usare per farlo funzionare bene con il box model, ma niente di fantastico per quanto ne so.

Per prima cosa puoi impostare il padding nel campo usando le percentuali, assicurandoti che la larghezza sia pari al 100%, ad esempio:

input {
  width: 98%;
  padding: 1%;
}

Un'altra cosa che potresti provare è usare il posizionamento assoluto, con sinistra e destra impostate su 0. Usando questo markup:

<fieldset>
    <input type="text" />
</fieldset>

E questo CSS:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

Questo posizionamento assoluto farà sì che l'input riempia orizzontalmente il fieldset genitore, indipendentemente dal riempimento o dal margine dell'input. Tuttavia, un enorme svantaggio di questo è che ora devi affrontare l'altezza del fieldset, che sarà 0 a meno che non lo imposti. Se i tuoi input sono tutti della stessa altezza, questo funzionerà per te, imposta semplicemente l'altezza del fieldset su qualunque sia l'altezza dell'input.

Oltre a questo ci sono alcune soluzioni JS, ma non mi piace applicare lo stile di base con JS.

— Jon Raasch
fonte

8

Perché input's widthè controllato da esso di sizeattributo, questo è come mi inizializzare un input widthsecondo il suo contenuto:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

— Fabricio
fonte

1

Sebbene questa #angularrisposta specifica non sia una risposta valida alla domanda dell'OP (e non sto votando), sono arrivato a questo argomento solo per trovare questa particolare idea.

— nobug

5

Potrebbe non essere esattamente ciò che desideri, ma la mia soluzione alternativa è applicare lo stile di larghezza automatica a un div wrapper, quindi impostare l'input al 100%.

— mwilcox
fonte

0

L'unica opzione a cui riesco a pensare è usare width:100%. Se vuoi avere un riempimento anche nel campo di input, oltre a posizionare un contenitore labelattorno ad esso, sposta invece la formattazione su quell'etichetta, specificando anche il riempimento nell'etichetta. I campi di input sono rigidi.

— Lajos Meszaros
fonte

0

Risposta 1 - "risposta" ha fornito una bella risposta / collegamento. In breve, "auto" è l'impostazione predefinita, quindi è come rimuovere qualsiasi modifica alla larghezza di un elemento

Risposta 2: usa width: 100%invece. Riempirà il 100% del contenitore principale, in questo caso il "modulo".

— Akhil Gupta
fonte

-4

Collegamenti assolutamente sorprendenti che descrivono una caratteristica assolutamente straordinaria:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

Il succo:

Metti gli elementi in un contenitore con display: flex;.
Impostato flex-grow: 1;su ciascuno degli elementi contenuti.
Se sono presenti elementi all'interno di tali elementi contenuti che devono anch'essi crescere, ripetere i passaggi 1 e 2 per gli elementi contenuti e i relativi elementi figlio (contenuti contenuti).
Adattarsi e adattare in base alle diverse esigenze (vedere i collegamenti).

Modifica - esempio :

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

— Andrea
fonte

In che modo questo aiuta con una larghezza automatica per gli input?

— kernel

@kernel Simple. Vedi esempio.

— Andrew

La larghezza dell'input è sempre del 100% e non la minima possibile.

— kernel

2

L'input non ha ancora la stessa larghezza del suo contenuto, che era la domanda.

— kernel

Se leggi la risposta accettata - e anche quella di tutti gli altri - fa qualcosa di diverso. La domanda sarebbe quindi "cosa stai facendo bene che tutti stanno facendo male?".

— kernel