Bagaimana untuk meningkatkan ketinggian input sambil mengekalkan teks di bahagian bawah?

Petua untuk mendapatkan teks untuk menyelaraskan bahagian bawah kotak input yang tinggi

Dalam pembangunan web, sering diperlukan untuk membuat kotak input dengan ketinggian yang lebih besar dan biarkan teks di dalamnya berada di bahagian bawah dan bukannya pusat menegak lalai. Artikel ini memperkenalkan beberapa cara untuk mencapai kesan ini.

Masalah: Teks berpusat secara menegak

Kotak input dengan ketinggian 60px, yang teksnya dipaparkan secara menegak berpusat secara lalai. Kita perlu menyesuaikannya ke bahagian bawah.

Penyelesaian: Leverage CSS

Tanpa padding, kita boleh melakukannya dengan susun atur CSS yang bijak. Kaedah ini adalah untuk menyembunyikan sempadan lalai input, kemudian bungkus input dengan bekas dengan sempadan dan letakkannya ke bahagian bawah bekas.

Langkah:

1. Sembunyikan sempadan lalai input: Gunakan border: none; Keluarkan sempadan lalai input.

2. Buat bekas dengan sempadan: Buat bekas div , tetapkan gaya ketinggian dan sempadan.

3. Input kedudukan ke bahagian bawah bekas: Gunakan position: absolute; dan bottom: 0; Untuk benar -benar mencari input ke bahagian bawah bekas.

Contoh kod:

 


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

Dengan kaedah di atas, teks akan sentiasa berada di bahagian bawah walaupun ketinggian input meningkat. box-sizing: border-box; Memastikan pengiraan ketinggian input termasuk sempadan dan margin dalaman, mengelakkan penyimpangan dalam pengiraan ketinggian.

Atas ialah kandungan terperinci Bagaimana untuk meningkatkan ketinggian input sambil mengekalkan teks di bahagian bawah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!