Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mengagihkan Item Navigasi Sekata dalam Bekas Lebar Tetap?
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 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.
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:
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.
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!