Alle prese con un campo di ricerca sull'allungamento automatico usando CSS

Question

Ho lottato per le ultime ore cercando di far allungare questo campo di ricerca con il browser (come Amazon.com).

Ho provato varie cose trovate su Google, come creare il campo di input o il contenitore genitore al 100%, overflow ... ecc., Ma non riesco a ottenerlo:/

Inoltre ho provato a far fluttuare le categorie nel modo giusto e ha scambiato i luoghi con il pulsante di invio.

Qualche idea su dove sto sbagliando?

http://jsfiddle.net/skinnygeek1010/rzhwa/

Answer 1

Questa potrebbe essere una situazione in cui potresti dover utilizzare un tavolo, se si desidera svolgere il lavoro. Usando una forma contenente una tabella di una fila, dividere il contenuto in tre celle, con il campo di input nella cella centrale. Imposta la larghezza della tabella e la larghezza della cella centrale al 100% e la larghezza del campo di input su qualcosa come il 98% (prova al 100% e vedrai perché deve essere leggermente ridotto). Oh, e prevenire la linea di interruzioni all'interno delle celle.

Una demo abbozzata del concetto: http://jsfiddle.net/yucca42/hyepu/

Se la polizia della tua azienda proibisce le tabelle per il layout, prova a dire loro che questa è una tabella di dati. In caso contrario, potresti simulare la tabella usando display: table ecc. in CSS (anche se questo diventa più complicato e fallirà su vecchie versioni di IE).