Comment augmenter la hauteur de l'entrée mais le texte est en bas?

Conseils pour augmenter la hauteur de l'entrée et l'alignement du fond du texte

Dans la conception Web, il est souvent nécessaire d'ajuster le style des éléments de forme, tels que la définition d'une boîte d'entrée plus élevée tout en gardant le texte en bas plutôt qu'au centre. Cet article présentera une façon intelligente d'éviter le rembourrage.

Supposons que la structure HTML existante est la suivante:

 


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      height: 60px;
    }
  </style>


  <input type="text" placeholder="请输入文字">

Dans ce code, la hauteur d'entrée est de 60 pixels, mais le texte est centré verticalement. Pour obtenir le texte en bas, nous pouvons utiliser la méthode suivante:

1. Masquer la bordure par défaut: Utilisez border: none; Retirez la bordure par défaut de l'entrée.
2. Créez un conteneur personnalisé: créez un conteneur Div et définissez la bordure pour simuler l'apparence de la zone d'entrée.
3. Entrée d'alignement inférieur: Positionnez l'entrée en bas du conteneur à l'aide de la disposition Flex.

Le code amélioré est le suivant:

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
    .custom-container {
      height: 60px;
      border: 1px solid #ccc;
      display: flex;
      align-items: flex-end; /* 关键：将项目垂直对齐到底部 */
    }
    input {
      border: none;
      height: 20px; /* 调整高度以适应文字大小 */
      width: 100%;
      margin-bottom: 5px; /* 微调底部间距 */
    }
  </style>


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

Grâce à cette méthode, nous définissons avec succès la hauteur d'entrée à 60 pixels, tandis que le texte est situé avec précision en bas et peut contrôler de manière flexible l'apparence de l'entrée. Cette méthode est plus contrôlable et flexible que simplement l'utilisation de rembourrage.

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!