Come realizzare una larghezza dell'elemento: 100% meno imbottitura?

Ho un input HTML.

L'ingresso ha padding: 5px 10px;che voglio che sia il 100% della larghezza del div del genitore (che è fluido).

Tuttavia, l'utilizzo width: 100%;fa sì che l'input sia 100% + 20pxcome posso aggirare questo?

Esempio

box-sizing: border-box è un modo rapido e semplice per risolverlo:

Questo funziona in tutti i browser moderni , e IE8 +.

Ecco una demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

Le versioni con prefisso del browser ( -webkit-box-sizing, ecc.) Non sono necessarie nei browser moderni.

Questo è il motivo per cui abbiamo box-sizingnei CSS.

Ho modificato il tuo esempio e ora funziona in Safari, Chrome, Firefox e Opera. Dai un'occhiata: http://jsfiddle.net/mathias/Bupr3/ Tutto quello che ho aggiunto è stato questo:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Sfortunatamente i browser più vecchi come IE7 non lo supportano. Se stai cercando una soluzione che funzioni nei vecchi IE, controlla le altre risposte.

Usa anche l'imbottitura in percentuale e rimuovi dalla larghezza:

imbottitura: 5%;
larghezza: 90%;

Puoi farlo senza usare box-sizinge non chiarire soluzioni come width~=99%.

Demo su jsFiddle :

• Mantieni input paddingeborder
• Aggiungi a input negativo orizzontale margin= border-width+horizontal padding
• Aggiungi al wrapper dell'input orizzontale paddinguguale a margindal passaggio precedente

Markup HTML:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Usa css calc ()

Super semplice e fantastico.

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}​

Come visto qui: Larghezza div 100% meno quantità fissa di pixel
Di webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Fonte originale: http://web-profile.com.ua/css/dev/css -width-100prc-minus-100px /

L'ho appena copiato qui, perché l'ho quasi perso nell'altro thread.

Supponendo che io sia in un contenitore con imbottitura 15px, questo è quello che uso sempre per la parte interna:

width:auto;
right:15px;
left:15px;

Ciò allungherà la parte interna a qualunque larghezza dovrebbe essere inferiore di 15 pixel su entrambi i lati.

Puoi provare alcuni trucchi di posizionamento. Puoi inserire l'input in un div con position: relativeun'altezza fissa, quindi sull'input position: absolute; left: 0; right: 0;e su qualsiasi padding che ti piace.

Esempio dal vivo

Ecco la raccomandazione di codeontrack.com , che contiene buoni esempi di soluzione:

Invece di impostare la larghezza del div al 100%, impostarlo su auto e assicurarsi che <div>sia impostato su display: block (impostazione predefinita per <div>).

Sposta il riempimento della casella di input su un elemento wrapper.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

Vedi esempio qui: http://jsfiddle.net/L7wYD/1/

Basta capire la differenza tra larghezza: auto; e larghezza: 100%; Larghezza: auto; (AUTO) calcolerà MATICALMENTE la larghezza per adattarsi esattamente al dato del div avvolgimento inclusa l'imbottitura. Larghezza 100% espande la larghezza e aggiunge l'imbottitura.

Che ne dite di avvolgerlo in un contenitore. Lo shoud container ha uno stile come:

{
    width:100%;
    border: 10px solid transparent;
}

Prova questo:

width: 100%;
box-sizing: border-box;

Per me, usando margin:15px;padding:10px 0 15px 23px;width:100%, il risultato è stato questo:

La soluzione per me era usare width:autoinvece di width:100%. Il mio nuovo codice era:

margin:15px;padding:10px 0 15px 23px;width:auto. Quindi l'elemento allineato correttamente:

Ho avuto lo stesso problema. Risolvilo in questo modo:

width: 100%;
box-sizing: border-box;

Puoi farlo:

width: auto;
padding: 20px;