ingressi di visualizzazione CSS in linea (ultimo ingresso Larghezza: 100%)

Question

Ho bisogno di creare una linea con un paio di ingressi e per essere sicuri che sempre riempire il div, ho aggiunto width:100% per l'ultimo ingresso

<div style="width:300px;background:#eee;height:30px"> 
    <input value="first" style="width:80px" type="button"/> 
    <input value="second" style="width:80px" type="button"/> 
    <input value="last" style="width:100%" type="button"/> 
</div> 

Questo esempio non funziona correttamente perché l'ultima larghezza di input è uguale a div e appare nella seconda riga.

Come posso far apparire tutti nella stessa riga?

Jsfiddle

Answer 1

Con un po 'di CSS puoi farlo. Avvolgere l'ultimo ingresso in un arco e aggiungere questo CSS:

<div style="width:300px;background:#eee;height:30px;"> 
    <input value="first" style="width:80px" type="button"/> 
    <input value="second" style="width:80px" type="button"/> 
    <span id="last"><input value="last" style="width:100%" type="button" /></span> 
</div> 
#last { 
    overflow:auto; 
    display:block; 
} 
input { 
    float:left; 
} 

jsFiddle example

Answer 2

Quando si utilizza width: 100%, questo riempie il div che contiene l'ingresso. Il modo migliore per inserirli tutti all'interno è distribuire uniformemente la larghezza del div tra gli input e farli fluttuare in modo che tutti si siedano uno accanto all'altro.

<div style="width:300px;background:#eee;height:30px"> 
<input value="first" style="width:100px, float: left;" type="button"/> 
<input value="second" style="width:100px" type="button"/> 
<input value="last" style="width:100px, float: right;" type="button"/> 
</div> 

La sintassi potrebbe non essere esattamente a destra, io uso raramente CSS in linea, molto meglio solo dare gli ingressi e classe e poi assegnare la classe con gli attributi nel file css.

Answer 3

si può provare per riempire il vostro div dalla tasto

<div style="width:300px;background:#eee;height:30px"> 
    <input value="first" style="width:80px" type="button"/> 
    <input value="second" style="width:80px" type="button"/> 
    <input value="last" style="width:132px" type="button"/> 
</div> 

Answer 4

Se avete N figli che si desidera per eseguire il rendering in base alla larghezza, è necessario impostare le rispettive larghezze su 100%/N, che per il proprio esempio sarebbe 100%/3 ~ 33.33333% Tuttavia, (a meno che non si disponga di box-sizing: border-box/padding-box set) è necessario anche tenere conto di margini, bordi e padding. Inoltre, se i tuoi elementi sono display: inline o display: inline-block, lo spazio bianco tra loro nella sorgente occuperà spazio. È necessario contrastare questo spazio bianco da

• La rimozione
• Annullamento con margin-right: -0.4em o qualche valore che funziona
• float gli elementi (che imposta in realtà display: block)

ho updated your demo con la soluzione più rapida che ti dà il risultato desiderato.