Heim >Web-Frontend >CSS-Tutorial >Wie zentriere ich eine ungeordnete Liste ohne übergeordnetes Div in CSS?
Wie zentriere ich eine ungeordnete Liste ohne übergeordnetes Div in CSS?
- Susan SarandonOriginal
- 2024-10-30 12:33:251031Durchsuche
So zentrieren Sie eine ungeordnete Liste ohne übergeordnetes DIV
Zentrieren Sie in CSS eine ungeordnete Liste (
- ) und behalten Sie dabei die linke Seite bei Ausgerichtete Listenelemente können ohne Verwendung eines übergeordneten Div eine Herausforderung sein. So erzielen Sie diesen Effekt:
- ) definiert werden. Durch Festlegen von margin: 0 auto für
- wird die Tabelle (d. h. die Liste) innerhalb ihres enthaltenden Elements zentriert.
Hier ist der CSS-Code, der diesen Effekt erzielt:
<code class="css">ul { display: table; margin: 0 auto; }</code>Zur Veranschaulichung hier ein Codeausschnitt, der den bereitgestellten HTML-Code verwendet, aber kein übergeordnetes Div:
<code class="html"><html> <body> <ul> <li>56456456</li> <li>4564564564564649999999999999999999999999999996</li> <li>45645</li> </ul> </body> </html></code>Dies Der Code zentriert die ungeordnete Liste auf der Seite, während die Listenelemente weiterhin linksbündig bleiben.
Das obige ist der detaillierte Inhalt vonWie zentriere ich eine ungeordnete Liste ohne übergeordnetes Div in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Das bereitgestellte Code-Snippet mit einem übergeordneten Div verwendet text-align:center auf dem div und display:inline-block auf dem ul, um die Liste zu zentrieren. Diese Methode erfordert jedoch einen übergeordneten Div-Wrapper.
Um eine ungeordnete Liste ohne übergeordnetes Div zu zentrieren, können CSS-Eigenschaften wie „margin“ und „text-align“ nicht effektiv verwendet werden, da das
- hat keine feste Breite.
Die Lösung liegt darin, das
- sich mit display:table wie eine Tabelle verhalten. Dadurch entsteht eine tabellenartige Struktur, in der Zeilen durch Listenelemente (