Bagaimanakah Saya Memusatkan Senarai Tidak Tertib Di Dalam Div Lebar Tetap Menggunakan CSS?

Reka Bentuk Web: Memusatkan Senarai Tidak Tertib Dalam Div Lebar Tetap

Apabila bekerja dengan elemen HTML, adalah perkara biasa untuk memerlukan penjajaran dan saiz tertentu. Senario biasa melibatkan pemusatan senarai tidak tertib (

) dalam bekas dengan lebar yang ditentukan. Untuk mencapai reka letak ini, kita boleh memanfaatkan kuasa CSS:

Penyelesaian:

Untuk memusatkan

, bersama-sama dengan memusatkan
• elemen, sambil memastikan pelarasan lebar dinamik, laksanakan strategi berikut:

  .wrapper {
      text-align: center;
  }
  
  .wrapper ul {
      display: inline-block;
      margin: 0;
      padding: 0;
      /* Ensure compatibility with older versions of Internet Explorer */
      zoom: 1;
      *display: inline;
  }
  
  .wrapper li {
      float: left;
      padding: 2px 5px;
      border: 1px solid black;
  }

  Salin selepas log masuk

  Penjelasan:

  1. Kelas .wrapper memusatkan keseluruhan bekas senarai menggunakan teks -align: center;.
  2. Ul .wrapper bersarang menggunakan paparan: inline-block;, membenarkan
     untuk menduduki hanya ruang yang diperlukan sambil mengekalkan sifat sebaris. Ia juga mengalih keluar margin lalai dan padding untuk jarak yang betul.
     • Untuk versi Internet Explorer yang lebih lama, zum: 1; memastikan keserasian merentas pelayar.
     • *paparan: sebaris; menggunakan kelakuan blok sebaris pada Internet Explorer 6 dan ke bawah.
     • Setiap
     • elemen berpusat dalam
       dengan menetapkan apungan: kiri;. Pelapik dan sempadan individu ditambah untuk meningkatkan daya tarikan visual.

  Pelaksanaan:

  <div class="wrapper">
      <ul>
          <li>Three</li>
          <li>Blind</li>
          <li>Mice</li>
      </ul>
  </div>

  Salin selepas log masuk

  Nota: Penyelesaian ini memberikan lebar maksimum fleksibiliti untuk

  kerana lebarnya melaraskan secara dinamik kepada kandungan dalam.

  Kemas kini:

  Untuk demonstrasi langsung, lawati pautan jsFiddle yang disediakan dalam bahan rujukan.

  Atas ialah kandungan terperinci Bagaimanakah Saya Memusatkan Senarai Tidak Tertib Di Dalam Div Lebar Tetap Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!