テキストを下部に保持しながら、入力の高さを上げるにはどうすればよいですか？

テキストを取得するためのヒント高入力ボックスの下部を整列させる

Web開発では、多くの場合、高さが大きい入力ボックスを作成し、デフォルトの垂直中心の代わりにテキストを下に置く必要があります。この記事では、この効果を達成するためのいくつかの方法を紹介します。

問題：垂直に中心にテキスト

高さ60pxの入力ボックス。テキストはデフォルトで垂直に中央に表示されます。底に調整する必要があります。

解決策：CSSを活用します

パディングがなければ、巧妙なCSSレイアウトでそれを行うことができます。この方法は、入力のデフォルトの境界線を非表示にしてから、入力を境界のあるコンテナで包み、コンテナの底に配置することです。

ステップ：

1. 入力デフォルトの境界を非表示： border: none;入力のデフォルトの境界を削除します。

2. 境界付きのコンテナを作成します： divコンテナを作成し、高さと境界スタイルを設定します。

3. コンテナの底部への位置入力：使用position: absolute;およびbottom: 0;コンテナの底部への入力を絶対に見つけるには。

コード例：

 


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

上記の方法では、入力の高さが増加しても、テキストは常に下部に残ります。 box-sizing: border-box;入力の高さの計算には、高さの計算の逸脱を避けて、境界と内側のマージンが含まれることを保証します。

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