Wie kann ein Eingabeelement die verbleibende Breite seines Containers ausfüllen?

So formatieren Sie ein Eingabeelement so, dass es an die verbleibende Breite seines Containers passt

Sie können häufig auf Situationen stoßen, in denen Sie ein Eingabeelement neben einer Beschriftung innerhalb eines festen Bereichs haben. Breite Container. Das Ziel besteht darin, dass das Eingabefeld seine Breite dynamisch anpasst, um den verbleibenden Platz auszufüllen, ohne dass es zu Zeilenumbrüchen kommt.

CSS-Lösung

<br>form {</p>
<pre class="brush:php;toolbar:false">width: 500px;
overflow: hidden;
background-color: yellow;

}
Eingabe-{

width: 100%;

}
Span-{

display: block;
overflow: hidden;
padding-right:10px;

}
Schaltfläche {

float: right;

}

<br><form method="post"></p>
<pre class="brush:php;toolbar:false"> <button>Search</button>
 <span><input type="text" title="Search" /></span>

< ;/pre>

Diese Lösung verwendet mehrere Schlüsseltechniken:

• Das Eingabeelement wird in einen Span mit einem display: Block-Eigenschaft und legt fest, dass es sich wie ein Element auf Blockebene verhält.
Der Span verfügt außerdem über eine
• overflow: versteckt-Eigenschaft, um zu verhindern, dass überschüssiger Eingabeüberlauf sichtbar wird.
Die
• Schaltfläche wird nach rechts verschoben, wodurch sie sich ganz rechts im Container positioniert.
Die Breite des Eingabeelements ist auf 100 %
• , wodurch die verbleibende Breite innerhalb des Formulars effektiv ausgefüllt wird.
Dieser Ansatz bietet eine einfache und effektive Möglichkeit, die Größe eines Eingabeelements dynamisch an die verbleibende Breite anzupassen, unabhängig von der Länge des Etiketts .

Das obige ist der detaillierte Inhalt vonWie kann ein Eingabeelement die verbleibende Breite seines Containers ausfüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!