Bagaimanakah Saya Boleh Mengagihkan Item Navigasi Mendatar dalam Bekas?

Mengedarkan Item Navigasi Mendatar Tetap Merentasi Bekas Tertentu dengan Cekap

Dalam bidang reka bentuk web, pengedaran harmoni item navigasi dalam bekas adalah cabaran biasa. Untuk mencapai reka letak yang menarik secara visual, item hendaklah dijarakkan sama rata, menampung kedua-dua panjang teks besar dan kecil.

Cabaran

Pendekatan tradisional, menggunakan lebar peratusan untuk individu item, gagal untuk mewajarkan sepenuhnya pengedaran dan mewujudkan jarak tidak sekata antara item dengan panjang yang berbeza-beza. Selain itu, kaedah ini rosak apabila item navigasi melebihi lebar yang ditentukan.

Penyelesaian: Flexbox

Penyelesaian moden untuk masalah ini terletak pada penggunaan Flexbox susun atur. Dengan menggunakan pengisytiharan berikut pada elemen kontena:

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

Flexbox membolehkan pengedaran item yang cekap di sepanjang paksi utama (mendatar dalam kes ini). Sifat justify-content menentukan cara item diedarkan dalam ruang yang tersedia. Dalam keadaan ini, "ruang-antara" memastikan bahawa item dijarakkan sama rata, dengan item pertama disiram dengan sempadan kiri dan item terakhir disiram dengan sempadan kanan.

Jusifikasi Alternatif

Pilihan lain untuk justify-content termasuk:

• ruang-sekitar: mengagihkan item secara sama rata, dengan separuh ruang pada kedua-dua hujungnya.
• ruang-sama rata: mengedarkan item supaya mereka mempunyai ruang yang sama di sekelilingnya mereka.

Keserasian

Flexbox disokong secara meluas merentas penyemak imbas moden, termasuk Chrome, Firefox dan Edge. Walau bagaimanapun, perlu diingatkan bahawa Internet Explorer 11 dan ke bawah tidak menyokong Flexbox.

Kesimpulan

Menggunakan reka letak Flexbox menyediakan pendekatan moden dan cekap untuk mengagihkan mendatar secara sama rata item navigasi dalam bekas yang ditentukan. Kaedah ini mengendalikan item dengan panjang yang berbeza-beza dengan lancar dan memastikan reka letak yang menarik dan responsif secara visual.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengagihkan Item Navigasi Mendatar dalam Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!