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

Barbara Streisand
Lepaskan: 2024-10-30 07:14:02
asal
364 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!