入力の高さを上げて、テキストを下部に配置する方法は？

テキストを底にエレガントに向けるように、入力の高さを巧みに調整します

Web開発では、フォーム要素のスタイルを微調整し、特に入力の高さを調整し、テキストを下に保持することがしばしば必要です。この記事では、この効果を達成するためにパディングを必要としない柔軟なソリューションを提供します。

要件の説明

より高い高さの値を設定する必要がある入力要素があると仮定しますが、デフォルトの垂直センタリングアライメントが要件を満たしていないため、テキストを下部に配置する必要があります。

解決策：コンテナと絶対的なポジショニングを使用します

パディングを使用してもたらされる制限を回避するために、入力要素をラップしてCSSポジショニングテクノロジーを使用してテキストボトムアライメントを実現するコンテナを作成できます。特定の手順は次のとおりです。

1. 入力のデフォルトスタイルを非表示：入力の境界をCSSを介してなしに設定し、背景色を透明に設定して目に見えないようにします。

2. カスタムコンテナを作成します： div要素をコンテナとして使用し、入力と同じ高さを設定し、境界と背景色を追加して、入力の外観をシミュレートします。

3. ボトムポジショニング入力： position: absoluteとbottom: 0を使用して、コンテナの下部への入力を絶対に見つけます。

以下は、HTMLおよびCSSコードの例です。

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>書類</title>
  <style>
    .input-container {
      height: 60px;
      border: 1px solid #ccc;
      position: relative; /* 关键：使子元素可以绝对定位 */
    }
    .input-container input {
      height: 100%;
      width: 100%;
      border: none;
      background-color: transparent;
      position: absolute;
      bottom: 0; /* 关键：将input定位到底部 */
    }
  </style>


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

上記の方法を通して、入力高さを60ピクセルに正常に設定し、スキームの柔軟性とスケーラビリティを維持しながら、テキストを下部に優雅に配置します。

以上が入力の高さを上げて、テキストを下部に配置する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。