Bagaimana untuk Mengagihkan Item Navigasi Sekata dalam Bekas Lebar Tetap?

Cara Mengagihkan Item Navigasi Mendatar Secara Sama rata Dalam Bekas Tertentu

Apabila mereka bentuk menu navigasi, selalunya wajar untuk meregangkan item secara merata ke seluruh bekas, mewujudkan estetika visual yang seimbang . Isu ini bertujuan untuk menangani cabaran ini, meneroka kaedah untuk mengagihkan enam item navigasi secara sama rata dalam bekas 900px dengan ruang putih yang konsisten.

Pendekatan Tradisional: Menggunakan Float dan Lebar Tetap

Pendekatan biasa ialah untuk menggunakan harta apungan, memberikan setiap item navigasi lebar tetap. Walau bagaimanapun, kaedah ini boleh membawa kepada pengagihan ruang putih yang tidak sekata, terutamanya apabila item berbeza dengan panjang. Selain itu, ia boleh memecahkan reka letak jika item melebihi lebar yang ditentukan.

Penyelesaian Moden: Kotak Flex

Pelayar moden menawarkan penyelesaian yang lebih elegan menggunakan reka letak kotak fleksibel. Dengan menetapkan sifat paparan untuk melentur pada elemen bekas dan menentukan justify-kandungan kepada nilai seperti ruang-antara, item akan diagihkan sama rata dalam ruang yang tersedia.

Kelebihan Flex Box:

• Mengedarkan barang secara merata, termasuk yang berbeza-beza panjang
• Melaraskan secara automatik kepada lebar bekas
• Menyokong berbilang pilihan pengedaran (cth., ruang sekeliling, ruang-sama rata)

Penyelesaian Alternatif: Penjajaran Teks

Alternatif yang lebih mudah untuk menggunakan kotak fleksibel melibatkan penetapan penjajaran teks pada bekas untuk mewajarkan. Ini menjajarkan item ke jidar kiri dan kanan, mewujudkan kesan yang serupa dengan justify-content: space-antara. Walau bagaimanapun, perlu diperhatikan bahawa pepijat penyemak imbas tertentu mungkin timbul jika menggabungkan kaedah ini dengan pertanyaan media.

Contoh Pelaksanaan

ul {
  list-style: none;
  padding: 0;
  width: 90vw;
  display: flex;
  justify-content: space-between;
}

li {
  background: gold;
}

Coretan kod ini menunjukkan pendekatan kotak fleksibel, mengagihkan item secara sama rata dalam bekas, memastikan ruang putih yang konsisten tanpa mengira panjang item.

Atas ialah kandungan terperinci Bagaimana untuk Mengagihkan Item Navigasi Sekata dalam Bekas Lebar Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!