Bagaimanakah Saya Boleh Menjajarkan Div secara Mendatar dalam HTML Tanpa Menggunakan Jadual?

Penjajaran Div Mendatar Tanpa Jadual

Dalam HTML, terdapat pelbagai cara untuk menjajarkan elemen. Walaupun mudah untuk menjajarkan div menggunakan jadual, ada yang lebih suka pendekatan bukan jadual. Begini cara untuk mencapai penjajaran div mendatar tanpa bergantung pada jadual:

Menggunakan CSS Float and Clear

1. Buat div induk: Balut dua div yang anda mahu selaraskan dalam div induk.
2. Apungkan divs: Tambah float: left; harta kepada anak div. Ini akan membuatkan mereka terapung ke sebelah kiri ibu bapa mereka.
3. Kosongkan pelampung: Untuk mengelakkan div kanak-kanak daripada disusun secara menegak, tambahkan clear: none; harta kepada div induk. Ini akan menghalang elemen daripada melilit div terapung.

Contoh Kod

.aParent div {
    float: left;
    clear: none; 
}

<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 mengikut langkah ini, anda boleh menjajarkan dua div secara mendatar dan mengelak daripada terpaksa menggunakan kepada reka letak jadual dalam halaman web anda.

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