Bagaimanakah Saya Boleh Menjajarkan Div Secara Mendatar Tanpa Menggunakan Jadual?

Penjajaran Mendatar Div tanpa Jadual

Dalam reka bentuk web, menjajarkan elemen secara mendatar sering timbul, terutamanya apabila mempersembahkan kandungan dalam lajur. Walaupun jadual menyediakan penyelesaian yang mudah untuk tugas ini, penggunaannya mungkin tidak selalu diingini. Artikel ini membincangkan persoalan menjajarkan elemen div secara mendatar tanpa menggunakan jadual.

Menggunakan Float dan Bekas Induk

Teknik asas untuk menjajarkan div secara mendatar melibatkan penggunaan sifat apungan . Terapung menyebabkan elemen beralih mengikut arah yang ditentukan, menjajarkannya dengan elemen bersebelahan. Untuk mencapai penjajaran mendatar, prinsip berikut boleh digunakan:

1. Buat Bekas Induk: Balut div dalam bekas induk. Bekas ini akan menyediakan konteks untuk penjajaran mendatar.
2. Apungkan Div: Tetapkan sifat apungan kepada 'kiri' untuk semua div anak dalam bekas induk. Ini akan menyebabkan div terapung ke arah kiri.
3. Clear Float: Untuk mengelakkan bekas induk daripada runtuh, gunakan 'clear: none;' gaya kepada div kanak-kanak. Ini memastikan ketinggian bekas induk tidak dipengaruhi oleh div anak terapung.

4. Kod Contoh:

   .aParent div {
    float: left;
    clear: none; 
   }
   
   .aParent {
    /* Add any additional styles for the parent container here */
   }

<div class="aParent">
    <div>
        <span>source list</span>
        <select size="10">
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
    <div>
        <span>destination list</span>
        <select size="10">
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
</div>

Dengan melaksanakan pendekatan ini, div akan menjajarkan secara mendatar sambil mengekalkan struktur yang ditentukan dan jarak.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Div Secara Mendatar Tanpa Menggunakan Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!