Bagaimana untuk Memusatkan Menu `` Mendatar dengan Sempurna dan Item Senarainya?

Memusatkan

Menu

Masalah:

Menu mendatar yang terdiri daripada senarai tidak tertib (

) perlu dipusatkan dalam bekas <div>. Semasa percubaan untuk memusatkan
dalam <div> telah berjaya, item senarai individu (
• ) kekal dijajar ke kiri dalam
  .

  Penyelesaian:

  Untuk mencapai pemusatan sempurna bagi kedua-dua

  dan item senarainya, pendekatan berikut disyorkan:
  1. Pembungkus Terapung: Buat pembalut apung-kiri di sekeliling
     dan tetapkan kedudukannya kepada "relatif" dengan offset kiri negatif. Ini meletakkan pembalut di luar skrin ke kiri.
     • Elemen Bersarang Terbalik: Letakkan bahagian dalam
       dalam pembalut menggunakan "kedudukan: relatif" dan offset kiri positif sebanyak 50%. Ini meletakkan
       betul-betul di bahagian tengah pembalut.
       • Item Senarai Terapung: Laraskan
       • elemen terapung ke kiri dalam
         dan mengekalkan kedudukan mereka dalam
         menggunakan "kedudukan: relatif."

  Contoh Kod:

  #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;
  }

  Salin selepas log masuk

  Contoh HTML:

  <div>

  Salin selepas log masuk

  Dengan pelaksanaan ini, menu akan dipusatkan dengan sempurna, dengan item senarai diagihkan sama rata dalam ruang mendatar.

  Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Menu `` Mendatar dengan Sempurna dan Item Senarainya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!