Anda menghadapi kesukaran untuk menjajarkan menu melintang di tengah, walaupun mencuba pelbagai teknik. Panduan ini akan menyelidiki isu ini dan menyediakan penyelesaian yang terbukti.
<div class="topmenu-design"> <ul>
#buttons { float: right; position: relative; left: -50%; text-align: left; } #buttons ul { list-style: none; position: relative; left: 50%; } #buttons li { float: left; position: relative; } #buttons a { text-decoration: none; margin: 10px; background: red; float: left; border: 2px outset blue; color: #fff; padding: 2px 5px; text-align: center; white-space: nowrap; } #buttons a:hover { border: 2px inset blue; color: red; background: #f2f2f2; } #content { overflow: hidden; /* hide horizontal scrollbar*/ }
Yang disyorkan penyelesaian melibatkan penggunaan apungan dan kedudukan relatif. Teknik ini memerlukan pembalut menu dalam pembalut terapung yang diletakkan di luar skrin di sebelah kiri. Selepas itu, item senarai bersarang diletakkan dalam arah yang bertentangan, dengan berkesan memusatkannya secara mendatar dalam pembungkus.
Teknik ini mengekalkan aliran kandungan dan membenarkan elemen lain muncul di bawah menu tengah. Tidak seperti penyelesaian JavaScript, pendekatan ini menggunakan sifat CSS, memastikan keserasian merentas pelayar lama.
Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Menu Mendatar Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!