CSS-Display Eingänge in-line (letzte Eingabebreite: 100%)

Question

Ich brauche eine Linie mit wenigen Eingaben zu schaffen und sicherzustellen, dass sie immer füllen Sie das div zu sein, ich habe width:100% zur letzten Eingabe hinzugefügt

<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> 

Dieses Beispiel funktioniert nicht gut, da die letzte Eingabebreite identisch mit div ist und in der zweiten Zeile erscheint.

Wie kann ich sie alle in der gleichen Zeile erscheinen lassen?

Jsfiddle

Answer 1

Mit ein wenig CSS können Sie dies tun. Wickeln Sie die letzte Eingabe in einer Spanne und fügen Sie diese 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

Wenn Sie Breite: 100%, das füllt den div die Eingabe enthält. Der beste Weg, um sie alle passen zu lassen, ist die Verteilung der div-Breite gleichmäßig zwischen den Eingaben, und schweben sie, so dass sie alle nebeneinander sitzen.

<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> 

Die Syntax nicht ganz richtig sein könnte, habe ich selten in-line CSS verwenden, viel besser dran, nur die Eingänge und Klasse geben und dann die Klasse mit Attributen in Ihrer CSS-Datei zuweisen.

Answer 3

Sie können versuchen, für füllen Sie Ihre div von Taste

<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

Wenn Sie N Kinder haben, die Sie möchten Um eine Breite anzupassen, müssen Sie die entsprechenden Breiten auf 100%/N setzen, was für Ihr Beispiel 100%/3 ~ 33.33333% wäre. (Es sei denn, Sie haben box-sizing: border-box/padding-box set) müssen Sie auch Ränder, Ränder und Abstände berücksichtigen. Wenn Ihre Elemente display: inline oder display: inline-block sind, nehmen die Leerräume zwischen ihnen in der Quelle ebenfalls Platz in Anspruch. Sie müssen diese Leerzeichen begegnen, indem sie

• es
• Rückgängig machen es mit margin-right: -0.4em oder einen Wert zu entfernen, die
• float Ihre Elemente (die eigentlich setzt display: block)

ich updated your demo habe funktioniert mit die schnellste Lösung, die Ihnen das gewünschte Ergebnis liefert.