Wie fülle ich die verbleibende Breite eines Containers mit einem Eingabeelement?

Verbleibende Containerbreite mit einem Eingabeelement füllen

Wenn Eingabebeschriftungen und Textfelder eine einzelne Zeile innerhalb eines Containers mit fester Breite teilen, wird das Styling verwendet Das Eingabefeld die verbleibende Breite optimal auszufüllen, kann eine Herausforderung sein. Hier ist eine vielseitige Lösung, ohne auf unzuverlässige JavaScript- oder Tabellenlayout-Tricks angewiesen zu sein:

Lösung:

1. Umschließen Sie das Eingabefeld: Schließen Sie das ein Eingabefeld in einem Bereich mit Anzeige: Block.
2. Positionierung umdrehen: Platzieren Sie das Schaltflächenelement vor dem Eingabefeld.
3. Floatieren Sie die Schaltfläche: Fügen Sie float: direkt zum Schaltflächenelement hinzu.
4. Füllen Sie den verbleibenden Platz aus: Das in die Spanne eingeschlossene Eingabefeld belegt automatisch den Rest Platz.

Beispiel:

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

<form method="post">
    <button>Search</button>
    <span><input type="text" title="Search" /></span>
</form>

Diese Vorgehensweise stellt sicher, dass das Eingabefeld auch ohne Kenntnis der Etikettengröße die verbleibende Containerbreite ausfüllt. Es ist einfach, sauber und mit verschiedenen Browsern kompatibel.

Das obige ist der detaillierte Inhalt vonWie fülle ich die verbleibende Breite eines Containers mit einem Eingabeelement?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!