Mengapa Elemen Sekat Sebaris Tersilap Sejajar Secara Menegak, dan Bagaimana Saya Boleh Membetulkannya?

Percanggahan Penjajaran Menegak Elemen Sebaris-Blok

Mengapakah elemen blok sebaris dengan kandungan mempamerkan salah jajaran menegak?

Penjelasan:

Harta CSS penjajaran menegak secara lalai menjajarkan garis dasar elemen dengan garis dasar elemen induk. Jika elemen tidak mempunyai kotak baris dalam aliran atau sifat limpahannya tidak kelihatan, garis dasar dijajarkan ke tepi jidar bawah.

Dalam contoh yang diberikan, elemen .divAccountData pada mulanya tidak mempunyai kandungan. Akibatnya, garis dasarnya menjajarkan ke tepi jidar bawah induknya, menyebabkan salah jajaran dengan elemen .divAccountPicker.

Penyelesaian:

Untuk menjajarkan kedua-dua elemen secara menegak, tetapkan sifat penjajaran menegak bagi elemen .divAccountData kepada atas:

.divAccountData {
  vertical-align: top;
  /* Other CSS properties... */
}

Ini memastikan garis dasar elemen .divAccountData sejajar dengan tepi atas elemen .divAccountPicker.

Pertimbangan Tambahan:

• Isu ini juga boleh diselesaikan dengan menambahkan teks pada Elemen .divAccountData, yang mewujudkan kotak baris dalam aliran dan menetapkan semula garis dasar.
• Penjajaran garis dasar dipengaruhi oleh bilangan baris dalam setiap elemen. Jika bilangan garisan berbeza-beza, memaksa penjajaran menegak menggunakan penjajaran menegak: atas pada kedua-dua elemen adalah perlu.

Atas ialah kandungan terperinci Mengapa Elemen Sekat Sebaris Tersilap Sejajar Secara Menegak, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!