Wie kann ein Eingabefeld den verbleibenden Platz in einem Container mit fester Breite ausfüllen?

Fluid-Breite für Eingabeelemente in Containern mit fester Breite erreichen

Frage:

Wie Kann ein Eingabefeld so gestaltet werden, dass es den verfügbaren verbleibenden Platz in seinem Container mit fester Breite einnimmt, ohne dass Text umbrochen wird oder die Beschriftung bestimmt werden muss? Größe im Voraus?

Antwort:

Um diesen Effekt zu erzielen, beachten Sie Folgendes:

1. Wrapper Span: Wickeln Sie das Eingabefeld in ein Span-Element ein, das auf display: block eingestellt ist.
2. Positional Reihenfolge: Platzieren Sie den „Button“ (oder andere Elemente) vor dem Eingabefeld.
3. Floating: Schweben Sie den „Button“ (oder andere Elemente) nach rechts, um das zu ermöglichen Eingabefeld, um den verbleibenden Platz zu füllen.

Beispiel Code:

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

form {
  width: 500px;
  overflow: hidden;
  background-color: yellow;
}

input {
  width: 100%;
}

span {
  display: block;
  overflow: hidden;
  padding-right: 10px;
}

button {
  float: right;
}

Das obige ist der detaillierte Inhalt vonWie kann ein Eingabefeld den verbleibenden Platz in einem Container mit fester Breite ausfüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!