Bagaimana untuk Memusatkan Senarai Tidak Tertib dalam Div Lebar Tetap?

Memusatkan Senarai Tidak Tertib (

) dengan
• Elemen dalam Div Lebar Tetap

Senario melibatkan pemusatan senarai tidak tertib (

) yang mengandungi
• elemen dalam div dengan lebar tetap. Untuk mencapai matlamat ini, kami akan menggunakan gabungan elemen CSS dan div.

  Penyelesaian

  1. Balut
     dalam div dengan kelas "pembungkus".

     • Gunakan gaya CSS berikut pada kelas "pembungkus":

       .wrapper {
           text-align: center;
       }

       Ini memusatkan div "pembungkus" dan menjajarkan

       di dalamnya.

       • Gunakan gaya CSS berikut pada

         dalam kelas "pembungkus":

         .wrapper ul {
             display: inline-block;
             margin: 0;
             padding: 0;
             /* IE support */
             zoom: 1;
             *display: inline;
         }

         Ini menjadikan

         berkelakuan seperti elemen sebaris dan membolehkannya berkembang secara dinamik berdasarkan kandungannya.

         • Gunakan gaya CSS berikut pada

         • elemen dalam
           :

           .wrapper li {
               float: left;
               padding: 2px 5px;
               border: 1px solid black;
           }

           Ini memastikan bahawa

           • elemen terapung di dalam
             dan dijajarkan secara mendatar.

  Contoh Kod

  <style>
      .wrapper {
          text-align: center;
      }
      .wrapper ul {
          display: inline-block;
          margin: 0;
          padding: 0;
          zoom: 1;
          *display: inline;
      }
      .wrapper li {
          float: left;
          padding: 2px 5px;
          border: 1px solid black;
      }
  </style>
  
  <div class="wrapper">
      <ul>
          <li>Element 1</li>
          <li>Element 2</li>
          <li>Element 3</li>
      </ul>
  </div>

  Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Senarai Tidak Tertib dalam Div Lebar Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!