Comment augmenter la hauteur de l'entrée tout en gardant le texte en bas?

Conseils pour obtenir du texte pour aligner le bas de la zone d'entrée élevée

Dans le développement Web, il est souvent nécessaire de créer des boîtes d'entrée avec une hauteur plus grande et de laisser le texte dedans en bas au lieu du centre vertical par défaut. Cet article introduit plusieurs façons d'atteindre cet effet.

Problème: Texte centré verticalement

Une boîte d'entrée avec une hauteur de 60px, dont le texte s'affiche verticalement par défaut. Nous devons l'ajuster au fond.

SOLUTION: Tirez parti de CSS

Sans rembourrage, nous pouvons le faire avec une disposition CSS intelligente. La méthode consiste à masquer la bordure par défaut de l'entrée, puis à envelopper l'entrée avec un conteneur avec la bordure et à le positionner au bas du conteneur.

étape:

1. Masquez la bordure par défaut de l'entrée: utilisez border: none; supprimer la bordure par défaut de l'entrée.

2. Créez un conteneur avec Borders: Créez un conteneur div , définissez sa hauteur et son style de bordure.

3. Positionner l'entrée au bas du conteneur: position: absolute; et bottom: 0; Pour localiser absolument l'entrée au bas du conteneur.

Exemple de code:

 


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>

Avec la méthode ci-dessus, le texte restera toujours en bas même si la hauteur d'entrée augmente. box-sizing: border-box; garantit que le calcul de la hauteur de l'entrée comprend les frontières et les marges intérieures, en évitant les écarts dans le calcul de la hauteur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!