Ingresso con display: il blocco non è un blocco, perché no?

139

Perché il codice display:block;width:auto; sul mio input di testo non si comporta come un div e riempie la larghezza del contenitore?Ingresso con display: il blocco non è un blocco, perché no?

Ho avuto l'impressione che un div sia semplicemente un elemento di blocco con larghezza automatica. Nel seguente codice non dovrebbero div e l'input hanno dimensioni identiche?

Come ottengo l'input per riempire la larghezza? La larghezza del 100% non funzionerà, perché l'input ha un riempimento e un bordo (causando una larghezza finale di 1 pixel + 5 pixel + 100% + 5 pixel + 1 pixel). Le larghezze fisse non sono un'opzione e sto cercando qualcosa di più flessibile.

Preferirei una risposta diretta a una soluzione alternativa. Questo sembra un capriccio del CSS e la sua comprensione potrebbe essere utile in seguito.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>width:auto</title> 

     <style> 
     div, input { 
      border: 1px solid red; 
      height: 5px; 
      padding: 5px; 
     } 
     input, form { 
      display: block; 
      width: auto; 
     } 
     </style> 
    </head> 

    <body> 
     <div></div> 
     <form> 
      <input type="text" name="foo" /> 
     </form> 
    </body> 
</html>

Vorrei sottolineare che posso già farlo con soluzioni alternative. A prescindere da questo avvitamento con la semantica della pagina e le relazioni con i selettori CSS, sto cercando di capire la natura del problema e se può essere superato modificando la natura dell'INPUT stesso.

Ok, questo è DAVVERO strano! Ho trovato che la soluzione è semplicemente aggiungere max-width:100% a un input con width:100%;padding:5px;. Tuttavia questo solleva ancora più domande (che chiederò in una domanda separata), ma sembra che la larghezza usi il normale modello di box CSS e la larghezza massima usi il modello della casella di confine di Internet Explorer. Quanto è strano.

Ok, che l'ultimo sembra essere un bug in Firefox 3. Internet Explorer 8 e Safari 4 limite del max-width al 100% + padding + confine che è ciò che le specifiche dice di fare. Infine, Internet Explorer ha qualcosa di giusto.

Oh mio Dio, è fantastico! Nel processo di giocare con questo e con molto aiuto dai venerabili guru Dean Edwards e Erik Arvidsson, sono riuscito a mettere insieme tre soluzioni separate per creare un vero cross-browser con larghezza del 100% sugli elementi con padding e bordi arbitrari. Vedi la risposta qui sotto. Questa soluzione non richiede alcun markup HTML extra, solo una classe (o selettore) e un comportamento facoltativo per Internet Explorer legacy .

fonte

2009-06-23 SpliFF

duplicato esatto del [http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers ] (http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-taintainers) –

@SleepyCod che non è un duplicato esatto. Questa domanda affronta il problema degli elementi 'input' che apparentemente non rispettano le specifiche CSS 2.1, mentre la domanda a cui ci si è collegati chiede come impedire che le caselle straripanti si trovino perfettamente entro i limiti delle specifiche CSS 2.1. Sia le domande che le loro soluzioni si sovrappongono, ma chiamarle duplicati esatti è semplicemente ** sbagliato. ** – amn

123

Guarda cosa ho ca me, una soluzione che utilizza lo stile relativamente sconosciuto box-sizing:border-box da CSS 3. Ciò consente una larghezza "vera" del 100% su qualsiasi elemento indipendentemente dal riempimento e/o dai bordi di tali elementi.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 

     <title>Cross-browser CSS box-sizing:border-box</title> 

     <style type="text/css"> 
      form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible} 
      div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial} 

      /* The voodoo starts here */ 
      .bb { 
       box-sizing: border-box; /* CSS 3 rec */ 
       -moz-box-sizing: border-box; /* Firefox 2 */ 
       -ms-box-sizing: border-box; /* Internet Explorer 8 */ 
       -webkit-box-sizing: border-box; /* Safari 3 */ 
       -khtml-box-sizing: border-box; /* Konqueror */ 
      } 
     </style> 

     <!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model --> 
     <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]--> 
    </head> 

    <body> 
     <form name="foo" action="#"> 
      <div class="bb">div</div> 
      <input class="bb" size="20" name="bar" value="field"> 
     </form> 
    </body> 
</html>

Questa soluzione supporta Internet Explorer 6 e Internet Explorer 7 tramite un comportamento scritto da Erik Arvidsson con alcune modifiche da Dean Edwards per sostenere percentuale e altre larghezze non-pixel.

Working example
Behaviour (boxsizing.htc)

fonte

2009-06-23 16:36:13 SpliFF

+12

Vorrei invitare questa risposta 1000 volte se potessi. –

Tu, signore, sei un genio. – GeReV

Sembra una soluzione eccezionale, ma non funziona in IE8 (le div e le caselle di campo non sono sufficientemente ampie). Sai se c'è stato qualche aggiornamento su questo metodo? Grazie! – rocketmonkeys

La cosa migliore è quello di avvolgere l'ingresso in un div con il bordo, i margini, ecc, e hanno l'ingresso interno con larghezza 100% e senza confini, senza margini, ecc

Ad esempio,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>width:auto</title> 

     <style> 
      div { 
       border: 1px solid red; 
       padding: 5px; 
      } 
      input, form { 
       display: block; 
       width: 100%; 
      } 
     </style> 
    </head> 

    <body> 
     <form> 
      <div><input type="text" name="foo" /></div> 
     </form> 
    </body> 
</html>

fonte

2009-06-23 05:52:27

Sì, funzionerà, ma è più una soluzione che una risposta. Sto cercando di stabilire perché l'input sembra ignorare il comportamento del blocco. – SpliFF

Jonathan, per favore perdona la mia apparente maleducazione qui, ma sono venuto qui cercando la risposta giusta (tm), e ho anche letto volentieri la parte in cui @SpliFF menziona espressamente che preferirebbe una "risposta diretta a una soluzione alternativa, ma aggiungete ancora un altro ridondante (come in, ripetuto molte volte sia a SO che altrove su Internet) rispondi, apparentemente ignorando il contratto della domanda.Posso ti chiedo - ** perché? ** Grazie in anticipo. -Curiously yours. – amn

La ragione per cui questo accade è che la dimensione di un input di testo è determinata dal suo attributo di dimensione. aggiungi size = "50" all'interno del taginput >. Quindi cambialo in size = "100" - vedi cosa intendo?

Sospetto che ci sia una soluzione migliore, ma l'unico che viene in mente è qualcosa che ho trovato sulla domanda "Hidden features of HTML" su SO: Usa un div-content-editable, invece di un input. Passare l'input dell'utente al modulo allegato (se è quello che ti serve) potrebbe essere un po 'complicato.

Hidden features of HTML

fonte

2009-06-23 06:00:27 MatrixFrog

I ' Sono curioso di sapere come la gente CSS lo giustifica.Se la larghezza può sovrascrivere la dimensione esplicitamente con pixel/percentuale, non vedo perché dovrebbe continuare ad onorarlo quando l'elemento è un blocco. – SpliFF

Comunque lo stesso accade a 'button' come beh, che non ha un attributo 'size'? – zanona

Una domanda che si concentra maggiormente sulla parte" perché è lo standard come questo "come questa risposta: http://stackoverflow.com/questions/4567988/what-is-it -in-the-css-dom-che-pr events-an-input-box-with-display-block-from-ex L'affermazione principale è che è perché "input" è un elemento sostituito. –

Si potrebbe fingere, in questo modo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>width:auto</title> 

     <style> 
     div, #inputWrapper { 
      border: 1px solid red; 
     } 
     #topDiv { 
      padding: 5px; 
      height: 5px; 
     } 
     form { 
      display: block; 
     } 
     #inputWrapper { 
      overflow: hidden; 
      height: 15px; 
     } 
     input { 
      display: block; 
      width: 100%; 
      border-style: none; 
      padding-left: 5px; 
      padding-right: 5px; 
      height: 15px; 
     } 
     </style> 
    </head> 

    <body> 
     <div id="topDiv"></div> 
     <form> 
      <div id="inputWrapper"> 
      <input type="text" name="foo" /> 
      </div> 
     </form> 
    </body> 
</html>

fonte

2009-06-23 06:00:32 Jacob

Ho fatto l'approccio falso in passato, ma ad essere sincero mi sto ammalando. Finisco con tutti i tipi di hack ritardati come usare il 99% di larghezza per ottenere input e selezionare per abbinare. Voglio davvero un modo per trattare un input come un div e speravo di aver semplicemente trascurato qualcosa. – SpliFF

anche l'input sarà overflow inputWrapper perché ha ancora larghezza: 100% con una spaziatura interna. – SpliFF

Inoltre potreste fingere, in questo modo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>width:auto</title> 

     <style> 

      .container { 
       width:90%; 
      } 

      .container div{ 
       border: 1px solid red; 
       padding: 5px; 
       font-size:12px; 
       width:100%; 
      } 

      input{ 
        width:100%; 
       border: 1px solid red; 
       font-size:12px; 
       padding: 5px; 
      } 

      form { 

       margin:0px; 
       padding:0px; 
      } 

     </style> 
    </head> 

    <body> 
     <div class="container"> 
      <div> 
       asdasd 
      </div> 
      <form action=""> 
       <input type="text" name="foo" /> 
      </form> 
     </div> 
    </body> 
</html>

fonte

2009-06-23 06:06:06 AlexC

stesso probablem come sopra, si dispone di un padding interno su una larghezza del 100%. Questo traboccherà. – SpliFF

puoi farlo con javascript – AlexC

Prova questo:

form { padding-right: 12px; overflow: visible; } 
input { display: block; width: 100%; }

fonte

2009-06-23 08:48:38 Mike

che hai lasciato fuori il padding e il bordo di input. Stavo per dire che ti sbagli finché non ho capito cosa stai facendo. Ora ho capito cosa cercava di fare merkuro (il suo codice è ancora sbagliato, ma il concetto era quasi arrivato). Il padding-right cambia il significato di 100% per 12px (bordo più padding di input).Lo svantaggio di questo approccio è che tutti gli altri bambini di forma sono influenzati dal padding e devono anche compensare. – SpliFF

Ingresso con display: il blocco non è un blocco, perché no?

risposta

Problemi correlati