Wie zentriere ich eine ungeordnete Liste innerhalb eines Divs mit fester Breite?

Zentrieren einer ungeordneten Liste (

) mit
• Elemente in einem Div mit fester Breite

Das Szenario beinhaltet das Zentrieren einer ungeordneten Liste (

), die
• Elemente innerhalb eines Divs mit fester Breite. Um dies zu erreichen, verwenden wir eine Kombination aus CSS- und div-Elementen.

  Lösung

  1. Wrap the
     in einem Div mit der Klasse „wrapper“.

     • Wenden Sie die folgenden CSS-Stile auf die Klasse „wrapper“ an:

       .wrapper {
           text-align: center;
       }

       Dadurch wird das „wrapper“-Div zentriert und ausgerichtet

       darin enthalten.

       • Wenden Sie die folgenden CSS-Stile auf das

         an. innerhalb der „wrapper“-Klasse:

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

         Dadurch wird das

         verhält sich wie ein Inline-Element und ermöglicht eine dynamische Erweiterung basierend auf seinem Inhalt.

         • Wenden Sie die folgenden CSS-Stile auf das

         • an. Elemente innerhalb der
           :

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

           Dadurch wird sichergestellt, dass die

           • Elemente schweben innerhalb des
             und horizontal ausgerichtet sind.

  Codebeispiel

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

  Das obige ist der detaillierte Inhalt vonWie zentriere ich eine ungeordnete Liste innerhalb eines Divs mit fester Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!