Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Menjajarkan Dua Elemen Blok Sebaris Kiri dan Kanan pada Baris yang Sama?

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

Barbara Streisand
Barbara Streisandasal
2024-10-30 07:14:02349semak imbas

How to Align Two Inline-Block Elements Left and Right on the Same Line?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn