Perché l'elemento <input> non rispetta la larghezza minima?

Question

http://jsbin.com/nuzazefuwi/1/edit?html,css,output

Nel link sopra il testo dovrebbe avere solo 10px invece ha una larghezza di 152px.

Questo è il codice:

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

 
.cont { 
 
    padding: 2px; 
 
} 
 

 
.main { 
 
    position: absolute; 
 
    border: 1px solid black; 
 
    min-width: 15px; 
 
}

<div class='main'> 
 
    <div class='cont'> 
 
    <input type="text" class='input' /> 
 
    </div> 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> the textbox should have 10px

Sembra che l'ingresso inizia a ottenere la larghezza corretta solo dopo .mainmin-width è maggiore di 156px.

Answer 1

C'è un valore predefinito di size="20" su <input> tipo text, search, tel, url, e-mail, o la password, che circa. di larghezza 100px (può variare a seconda del browser e del sistema operativo).

Sul genitore, si imposta min-width:15px, che non ha alcun effetto, poiché il valore è molto inferiore a 100px. Se si modifica in width:15px o max-width:15px (o aggiungerlo come regola aggiuntiva) che funzionerà correttamente.

Come commentato, in alternativa è possibile fornire size un valore piccolo come size="1".

Answer 2

cambiare la vostra larghezza css come 155px

.input{ 
    width:155px; //Replace 100% to 155px 
box-sizing:border-box; 
} 

Answer 3

Il contenitore .main estende la larghezza del contenuto all'interno e solo se si ridimensiona lo schermo a dimensioni ridotte si vedrà che la input in realtà si adatta all'interno con più piccolo del larghezza di input predefinita. Se si modifica il width del contenuto di .main, si osserverà che lo input modifica il valore predefinito width sullo schermo grande e si riduce a non meno del valore min-width.

.main{ 
    position:absolute; 
    border:1px solid black; 
    width: 75px; 
    min-width:15px; 
} 

http://jsbin.com/xeyupinaja/3/edit

Answer 4

Si dispone di un set min-width, ma non max-width.

Il manuale ha una dimensione predefinita impostata dal browser. Quella predefinita è maggiore del min-height, quindi sia il browser che il css sono felici di lasciare che la larghezza predefinita avvenga e aumentare la larghezza del contenitore.

Impostando un max-width o un width per il contenitore, le dimensioni del contenitore e dell'input saranno limitate e le loro dimensioni verranno calcolate di conseguenza.

.main{ 
    position:absolute; 
    border:1px solid black; 
    min-width:14px; 
    max-width:140px; // What do you want here? 
} 

penso che questo è anche ciò che @sdcr rispose e anche lui ti ha dato ulteriori informazioni sulle dimensioni e calcoli di default.