Come rendere un campo di input con larghezza del 100% meno la larghezza del pulsante di invio?

Question

Ho un campo di input singolo molto semplice con un pulsante "invia" accanto. Il pulsante di ricerca ha una larghezza fissa di 104 pixel. Entrambi sono avvolti insieme con una larghezza totale del 50% della finestra del browser. Il mio piano è di consentire al campo di input di ingrandire mentre la finestra del browser si allarga.

Al momento, per la mia finestra del browser specifica, devo correggere la larghezza del campo di input da distribuire dalla sinistra del wrapper alla sinistra del pulsante di invio. Tuttavia, quando ridimensiono la finestra, ovviamente (ovviamente) non si aggiusta di conseguenza e lascia uno spazio vuoto.

Non ho trovato risposta a questa domanda da nessun'altra parte. Sono ben consapevole del fatto che solitamente una larghezza del 100% con un riempimento destro di 104 px risolverà questo tipo di problema con altri elementi in linea. TUTTAVIA, il problema qui è che il pulsante non sembra seduto sopra il padding e si sposta invece su una nuova riga.

Come posso risolvere questo? Grazie!

MODIFICA: Ecco quello che ho finora. Visita jsfiddle.net/nWCT8/ L'intero wrapper deve essere centrato, e deve avere il supporto del browser di maggioranza (anche se non mi dispiace se IE6 non funzionerà con esso). Per questo motivo, non credo che "calc" sia abbastanza adatto.

Answer 1

perché si ha un altezza fissa, è possibile utilizzare absolute grado di raggiungere questo obiettivo (Se non si richiedono per supportare IE 6)

EDIT aggiornamento mia base risposta sul vostro jsfiddle, ma solo potessi provalo subito con Chrome, Safari e FF.

jsfiddle

Per ottenere auto allargando lavoro adeguato con FF è necessario utilizzare un wrapper attorno ad esso e le input necessità di avere una larghezza di 100%. Per evitare che l'imbottitura dei input elementi da aggiungere alle width le seguenti regole CSS deve essere utilizzato:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 

box-sizing è supportata da: IE 8+, Chrome, Opera 7+, Safari 3+, Firefox

EDIT designa input elementi è tipicamente problematica a causa della loro padding e margin. Per avere il risultato che si vuole raggiungere senza la funzione css3 calc è necessario fare le seguenti operazioni:

1. definire l'altezza al .form-wrapper circostante e impostare il suo position-relative in modo che questo elemento è responsabile della posizione absolute degli elementi che contiene.

2. dell'involucro contenitore (.input-wrapper) attorno all'elemento input, definendo la sua posizione di absolute con left:0px, top:0px, bottom:0px e right:[the width of your button] questo modo l'involucro ha sempre una distanza del width of the button sul lato destro.

3. Impostare la width e height dell'elemento input-100%. Per evitare che il padding dell'elemento input venga aggiunto a width, è necessario impostare box-sizing su border-box.

4. Impostare la posizione del button per absolute con top:0px, bottom:0px e right:0 e impostando la larghezza a width: [width of your button]

Answer 2

Per i browser più recenti che supportano CSS3, si potrebbe usare calc():

width: calc(100% - 50px); // change 50px to width of button 

Answer 3

html:

<div> 
    <input type="text" id="search" /> 
    <input type="button" value="Search" id="button" /> 
    <br class="clear: both;" /> 
</div> 

css:

* { 
    padding: 0; 
    margin: 0; 

} 

div { 
    width: 70%; 
    margin: 0 auto;  
    padding: 5px; 
    background: grey;  
} 

#search { 
    width: calc(100% - 110px);   
    float: left; 
} 

#button { 
    width: 104px; 
    float: left;  
} 

jsfiddle

Answer 4

La risposta scelta funziona bene, tuttavia, è troppo complicato. Riscrisse la risposta a essere molto più semplice:

HTML:

<div class="halfWidth"> 
    <div class="input-wrapper"> 
     <input type="text" placeholder="Input text here"/> 
    </div> 
    <button type="submit">Search</button> 
</div> 

CSS:

.halfWidth { 
    width:50%; 
} 
.input-wrapper { 
    margin-right:100px; 
} 
input { 
    float: left; 
    width: 100%; 
    -ms-box-sizing: border-box; /* ie8 */ 
    -khtml-box-sizing: border-box; /* konqueror */ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    box-sizing: border-box; /* css3 rec */ 
} 

Vedi esempio a:
http://jsfiddle.net/nWCT8/4/