Wie erhöht man die Höhe des Eingangs, während der Text unten bleibt?

Tipps zum Erhalten von Text, um den Boden des Hocheingangsfelds auszurichten

In der Webentwicklung ist es häufig notwendig, Eingabefelder mit einer größeren Höhe zu erstellen und den darin enthaltenen Text anstelle des Standard -vertikalen Zentrums unten zu lassen. In diesem Artikel werden verschiedene Möglichkeiten eingeführt, um diesen Effekt zu erzielen.

Problem: Text zentriert vertikal

Ein Eingangsfeld mit einer Höhe von 60px, deren Text standardmäßig vertikal zentriert ist. Wir müssen es am Boden einstellen.

Lösung: Nutzen Sie CSS

Ohne Polsterung können wir es mit cleverem CSS -Layout tun. Die Methode besteht darin, den Standardrand der Eingabe auszublenden, dann den Eingang mit einem Behälter mit dem Rand einzuwickeln und ihn am Boden des Containers zu positionieren.

Schritt:

1. Eingabestandgrenze ausblenden: Verwenden Sie border: none; Entfernen Sie den Standardrand der Eingabeeingabe.

2. Erstellen Sie einen Container mit Grenzen: Erstellen Sie einen div -Behälter, setzen Sie seinen Höhe- und Randstil.

3. Positionseingabe zum Boden des Containers: Verwenden Sie position: absolute; und bottom: 0; Um die Eingabe auf den Boden des Containers zu finden.

Codebeispiel:

 


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dokumentieren</title>
<style>
.container {
  height: 60px;
  border: 1px solid #ccc;
  position: relative; /* 关键：使绝对定位的子元素相对于此容器定位 */
}
input {
  height: 100%;
  border: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
}
</style>


  <div class="container">
    <input type="text" placeholder="请输入文本">
  </div>

Nach der obigen Methode bleibt der Text immer unten unten, selbst wenn die Eingangshöhe zunimmt. box-sizing: border-box; stellt sicher, dass die Höhe der Höhe der Eingabe Grenzen und innere Ränder umfasst, wodurch Abweichungen in der Höhenberechnung vermieden werden.

Das obige ist der detaillierte Inhalt vonWie erhöht man die Höhe des Eingangs, während der Text unten bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!