入力要素の高さを上げて下部にテキストを作成するにはどうすればよいですか？

入力要素の高さを巧みに調整して、テキストを下部にエレガントにドッキングできるようにします

Webデザインでは、入力要素の高さを調整し、その中のテキストが下部にあることを確認する必要があることがよくあります。ただし、入力要素のデフォルトテキストは垂直に中央に配置されていますが、これをどのように解決できますか？この記事では、パディングに頼らない賢い方法を提供します。

問題の説明

高さ60ピクセルの入力要素があり、テキストがデフォルトで中央にあるとします。入力要素の高さを変更せずに、テキストを下部に調整する必要があります。

最初のHTMLおよびCSSコードは次のとおりです。

 


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

解決策：コンテナ法

ターゲット効果を実現するために、コンテナを作成し、入力要素を配置し、絶対的な位置を使用して入力の位置を正確に制御できます。特定の手順は次のとおりです。

1. 入力デフォルトのボーダーを非表示：入力の境界線を透明またはボーダレスに設定します。
2. カスタムコンテナを作成します： Divコンテナを作成し、高さと境界スタイルを設定します。
3. 絶対的な位置決め入力：使用position: absolute;コンテナの下部への入力を見つける。

変更されたコードは次のとおりです。

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
    .input-container {
      height: 60px;
      border: 1px solid #000; /* 可自定义边框样式 */
      position: relative;
    }
    .input-container input {
      height: 100%;
      border: none; /* 隐藏input默认边框 */
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  </style>


  <div class="input-container">
    <input type="text">
  </div>

この方法は、60ピクセルの高さを維持しながら、入力要素のテキストを下部に効果的に見つけ、パディングを使用することによって引き起こされる潜在的なレイアウトの問題を回避し、スタイルと位置のより柔軟な制御を回避します。

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