Bagaimana untuk Menjajarkan Dua Elemen Blok Sebaris Kiri dan Kanan pada Baris yang Sama?

Jajarkan Dua Blok Sebaris Kiri dan Kanan pada Garisan Yang Sama

Dalam pembangunan web moden, menjajarkan dua elemen blok sebaris ke kiri dan kanan pada baris yang sama boleh menjadi tugas yang kelihatan rumit. Walau bagaimanapun, menggunakan teknik yang betul boleh memudahkan pendekatan.

Flexbox

Flexbox menyediakan penyelesaian yang mudah. Dengan menggunakan paparan: lentur pada bekas induk dan justify-kandungan: ruang-antara anak-anaknya, elemen boleh diletakkan di hujung bertentangan bekas dengan jarak yang sama. Ini boleh dilaksanakan dengan mudah seperti berikut:

<code class="css">.header {
    display: flex;
    justify-content: space-between;
}</code>

Penjajaran Teks: Justify

Teknik alternatif melibatkan penggunaan penjajaran teks: justify pada elemen induk. Walau bagaimanapun, ini memerlukan penggodaman tambahan untuk memastikan keserasian dengan penyemak imbas yang lebih lama:

<code class="css">.header {
    text-align: justify;
    /* IE 7 */
    *width: 100%;
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}</code>

Untuk mengelakkan ruang tambahan dimasukkan dengan elemen pseudo :after, helah boleh digunakan:

<code class="css">.header {
    font-size: 0;
}
h1, .nav {
    font-size: 14px;
}</code>

Dengan menetapkan saiz fon elemen induk kepada 0 dan menetapkan semula untuk elemen anak, isu itu boleh diselesaikan.

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