Bagaimanakah Saya Boleh Menjajarkan Blok Sebaris Kiri dan Kanan pada Baris yang Sama?

Menjajarkan Blok Sebaris Kiri dan Kanan pada Garisan Yang Sama

Mencapai penjajaran blok sebaris yang betul boleh menjadi satu cabaran. Isu ini timbul apabila cuba meletakkan dua blok sebaris, satu di sebelah kiri dan satu di sebelah kanan, pada satu baris.

Walau bagaimanapun, terdapat penyelesaian yang tersedia yang boleh menangani masalah ini. Walaupun menggunakan apungan mungkin tidak sesuai untuk mengekalkan penjajaran garis dasar dan bertindak balas kepada saiz semula tetingkap, teknik lain menawarkan lebih fleksibiliti.

Menggunakan Flexbox untuk Penjajaran Cekap

Pelayar moden menawarkan sokongan untuk flexbox, yang menyediakan pendekatan yang ringkas dan boleh disesuaikan untuk penjajaran. Dengan memberikan paparan: lentur pada bekas induk dan justify-kandungan: ruang-antara anak-anaknya, anda boleh menjarakkan mereka dengan berkesan sambil memastikan mereka kekal pada baris yang sama.

.header {
    display: flex;
    justify-content: space-between;
}

Memanfaatkan Teknik Justifikasi Penjajaran Teks

Jika flexbox tidak disokong, pertimbangkan untuk menggunakan teknik penjajaran teks: justify. Pendekatan ini mengagihkan ruang putih secara sama rata antara perkataan dan baris, menghasilkan kesan yang serupa dengan teks yang dibenarkan dalam pemproses perkataan.

.header {
    text-align: justify;
}

.header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

Walau bagaimanapun, teknik ini memerlukan pertimbangan tambahan untuk penyemak imbas seperti IE7 dan lebih awal, di mana "star hacks" diperlukan untuk memastikan keserasian.

Mengatasi Artifak Ruang Putih

Dalam beberapa keadaan, blok sebaris mungkin memperkenalkan ruang putih yang tidak diingini, menjejaskan penjajaran. Untuk menyelesaikan isu ini, anda boleh menetapkan saiz fon elemen induk kepada 0 dan menetapkan semula kepada nilai yang dikehendaki untuk elemen anak. Pendekatan ini secara berkesan menghapuskan sebarang jurang tambahan yang dicipta oleh unsur pseudo yang digunakan dalam kaedah penjajaran teks: justify.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Blok Sebaris Kiri dan Kanan pada Baris yang Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!