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

       Salin selepas log masuk

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

         Salin selepas log masuk

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

           Salin selepas log masuk

           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>

  Salin selepas log masuk

  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!