Wie fülle ich die verbleibende Containerbreite mit einem Eingabeelement?

Verbleibende Containerbreite mit einem Eingabeelement füllen

In bestimmten Weblayouts befinden sich möglicherweise eine Beschriftung und ein Eingabefeld in derselben Zeile innerhalb eines Containers mit fester Breite. Die Herausforderung entsteht, wenn Sie möchten, dass das Eingabefeld die verbleibende Breite des Behälters einnimmt, ohne dass Sie die Größe des Etiketts umwickeln oder vorher wissen müssen.

Vorgeschlagene Lösung

Zur Lösung Um dieser Herausforderung zu begegnen, ziehen Sie die folgende Lösung in Betracht:

Umschließen Sie das Eingabefeld mit einem Span-Element und setzen Sie seine Anzeigeeigenschaft auf „Block“. Dadurch wird sichergestellt, dass sich das Eingabefeld wie ein Element auf Blockebene verhält.

Platzieren Sie das Eingabefeld nach dem Schaltflächenelement.

Schieben Sie die Schaltfläche nach rechts.

Indem Sie diese befolgen Schritte, füllt das Eingabefeld natürlich den verbleibenden Platz im Container ohne Umbruch aus.

Beispiel Code

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>

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