入力の高さを高くするにはどうすればよいですかが、テキストは下部にありますか？

入力の高さを高くするためのヒントとテキストの底部アライメント

Webデザインでは、テキストを中央ではなく下部に保持しながら、より高い入力ボックスを設定するなど、フォーム要素のスタイルを調整する必要があることがよくあります。この記事では、パディングを避けるための賢い方法を紹介します。

既存のHTML構造が次のとおりであると仮定します。

 


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


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

このコードでは、入力の高さは60ピクセルですが、テキストは垂直に中心です。下部にテキストを取得するには、次の方法を使用できます。

1. デフォルトの境界線を非表示： border: none;入力のデフォルトの境界を削除します。
2. カスタムコンテナを作成します： Divコンテナを作成し、境界線を設定して、入力ボックスの外観をシミュレートします。
3. ボトムアライメント入力：フレックスレイアウトを使用して、コンテナの下部に入力を配置します。

改善されたコードは次のとおりです。

 


  <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>

この方法により、入力高さを60ピクセルに正常に設定しますが、テキストは正確に下部にあり、入力の外観を柔軟に制御できます。この方法は、単にパディングを使用するよりも制御可能で柔軟です。

以上が入力の高さを高くするにはどうすればよいですかが、テキストは下部にありますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。