CSS display-Eingänge in-line (Letzte Eingabe-width:100%)

Ich brauche, um eine Linie mit ein paar Eingaben und sicher sein, Sie füllen immer das div, die ich Hinzugefügt habe width:100% um die Letzte Eingabe

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

In diesem Beispiel nicht gut funktioniert, weil die Letzte Eingabe der Breite ist die gleiche wie div ' s und es wird in der zweiten Zeile.

Wie kann ich Sie alle erscheinen in der gleichen Zeile?

Jsfiddle

Wenn Sie im Voraus wissen, die container width, warum versuchen Sie zu erraten, die letzten div width?
warum gehst du nicht teilen 100% bei den Kontrollen?
width: 100% wird die Letzte Eingabe 100% der Breite des Containers. Können Sie eine Feste Breite für alle Eingänge?
Ja, aber das ursprüngliche Dokument enthält 6 bis 11 Eingänge an der unterschiedlichen Größe. Plus Sie dynamisch ändern?
Sie wollen also die Letzte Schaltfläche zu füllen den verbleibenden Raum? Es macht keinen Sinn, da der container hat eine Feste Breite??

InformationsquelleAutor AMD | 2013-08-23

  1. 15

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

    Funktioniert, danke
    das ist perfekt. Ich habe ein Dutzend ähnlicher Fragen und Antworten und alles entweder: 1) man ignoriert die Frage und antwortete mit fester Breite, oder 2) war über eine Seite im Wert von fragwürdigen css. Dies war kurzgefasst und genau das Tat, was nötig war, vielen Dank!

    InformationsquelleAutor j08691

  2. 1

    Wenn Sie width: 100%, dieser füllt das div mit der Eingabe. Der beste Weg, um Sie alle passen in eine ist die zu verteilen, die div-Breite gleichmäßig zwischen den Eingängen, und schwimmen 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 ist vielleicht nicht genau das richtige, ich selten verwenden in-line CSS, viel besser dran, einfach nur indem Sie die Eingänge und die Klasse und dann die Zuweisung der Klasse mit Attributen in Ihr .css-Datei.

    Eine weitere sinnvolle option ist, um einen Prozentsatz der Breite, die annähernd an seine 80px Wert angesichts der container-Größe, dann die Mathematik zu tun, und geben das Letzte div die den übrigen Raum.
    Genau ^ Können Sie verwenden Sie em auch, aber ich war nur demonstrieren, was eine Methode ist.

    InformationsquelleAutor user5623896726

  3. 0

    Können Sie Versuchen, füllen Sie Ihre div-aus-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>

    InformationsquelleAutor Love Trivedi

  4. 0

    Wenn Sie N Kinder, die Sie Rendern möchten, passen einige Breite, dann müssen Sie Ihre jeweiligen breiten 100% /N, die für Ihr Beispiel wäre 100% /3 ~33.33333% Jedoch (es sei denn, Sie haben box-sizing: border-box/padding-box gesetzt), müssen Sie auch berücksichtigen, Ränder, Rahmen und Polsterung. Darüber hinaus, wenn Ihre Elemente sind display: inline oder display: inline-block die Leerzeichen zwischen Ihnen, in der Quelle wird auch "Raum". Sie müssen gegen diese Leerzeichen durch

    • Entfernen
    • Lösen mit margin-right: -0.4em oder etwas Wert, der arbeitet
    • float Ihre Elemente (die eigentlich setzt display: block)

    Habe ich aktualisiert demo mit die Schnellste Lösung, die Ihnen das gewünschte Ergebnis.

    InformationsquelleAutor André Dion

Schreibe einen Kommentar