Wie zentriere ich mithilfe von CSS eine ungeordnete Liste in einem Div mit fester Breite?

Webdesign: Zentrieren einer ungeordneten Liste in einem Div mit fester Breite

Bei der Arbeit mit HTML-Elementen ist es üblich, eine bestimmte Ausrichtung und Größe zu erfordern. Ein typisches Szenario besteht darin, eine ungeordnete Liste (

) innerhalb eines Containers mit definierter Breite zu zentrieren. Um dieses Layout zu erreichen, können wir die Leistungsfähigkeit von CSS nutzen:

Lösung:

Zum Zentrieren des

und der individuellen Zentrierung seines
• Elemente implementieren unter Gewährleistung einer dynamischen Breitenanpassung die folgende Strategie:

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

  Erklärung:

  1. Die .wrapper-Klasse zentriert den gesamten Listencontainer mithilfe von Text -align: center;.
  2. Der verschachtelte .wrapper ul verwendet display: inline-block;, wodurch die
     um nur den erforderlichen Platz einzunehmen und gleichzeitig die Inline-Eigenschaften beizubehalten. Außerdem werden Standardränder und -abstände für den richtigen Abstand entfernt.
     • Für ältere Versionen von Internet Explorer: Zoom: 1; sorgt für browserübergreifende Kompatibilität.
     • *display: inline; wendet das Inline-Block-Verhalten auf Internet Explorer 6 und niedriger an.
     • Jeder
     • Das Element ist innerhalb des
       zentriert. durch Setzen von float: left;. Einzelne Polsterungen und Ränder werden hinzugefügt, um die optische Attraktivität zu verbessern.

  Implementierung:

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

  Hinweis: Diese Lösung bietet maximale Breite Flexibilität für die

  da sich seine Breite dynamisch an den darin enthaltenen Inhalt anpasst.

  Aktualisierung:

  Für eine praktische Demonstration besuchen Sie den jsFiddle-Link im Referenzmaterial.

  Das obige ist der detaillierte Inhalt vonWie zentriere ich mithilfe von CSS eine ungeordnete Liste in einem Div mit fester Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!