Bagaimana untuk Menjajarkan Elemen DIV ke Kanan Semasa Mengekalkan Susunan Menegak?

Menjajarkan Elemen DIV ke Kanan

Masalah:

Dalam dokumen HTML, menjajarkan berbilang elemen DIV di sebelah kanan boleh membawa kepada isu di mana elemen kehilangan susunan menegak dan akhirnya disusun secara mendatar.

Analisis:

Menggunakan "float: right" untuk selaraskan DIV boleh menyebabkan masalah ini, terutamanya jika DIV terkandung dalam DIV induk. Dalam kes sedemikian, DIV terapung akan dialih keluar daripada aliran biasa dokumen dan diletakkan bersebelahan antara satu sama lain.

Penyelesaian:

Untuk mencapai penjajaran yang betul sambil mengekalkan tindanan menegak, pendekatan alternatif ialah menggunakan sifat CSS berikut:

margin-left: auto;

• Harta ini secara automatik melaraskan margin kiri DIV kepada tolaknya ke arah kanan bekas induknya.

margin-kanan: 0;

• Harta ini menghapuskan sebarang jidar kanan, memastikan DIV kekal siram dengan tepi kanan bekasnya.

Contoh:

Berikut ialah versi diperbaik bagi kod yang disediakan menggunakan sifat ini:

<code class="css">#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  margin-left: auto;
  margin-right: 0;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}</code>

Dengan menggunakan sifat ini, butang dan borang akan dijajarkan ke kanan, disusun secara menegak satu demi satu seperti yang dimaksudkan.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Elemen DIV ke Kanan Semasa Mengekalkan Susunan Menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!