Zentrieren Sie Aufzählungszeichen in HTML
Aufzählungslisten werden zum Erstellen von Listen verwandter Elemente in HTML verwendet und können zum Erstellen von Gliederungen und Menüs oder Listen verwandter Elemente verwendet werden. Jeder Listeneintrag beginnt mit einem <li> -Tag.
Die Listenelemente werden in einem Tag <ul> (ungeordnete/aufgelistete Liste) oder <ol> (geordnete/nummerierte Liste) gespeichert. Dieser Artikel wird uns die verschiedenen Aufzählungszeichen-Stile beibringen und wie man Aufzählungszeichen in HTML zentriert.
HTML-Stile von Aufzählungszeichen
In HTML kann ein Aufzählungspunkt mit dem Tag <ul> (ungeordnete Liste) erstellt werden, und um ihn zu stylen, verwenden wir das Attribut list-style-type. Das Attribut list-style-type spezifiziert den Markierungstyp für die Liste und kann folgende Werte annehmen.
disc- Eine feste Disc (Standard)Kreis- Ein hohler KreisQuadrat- Ein gefülltes Quadratnone- Keine Markierung (nützlich zum Erstellen von verschachtelten Listen)
Disc – Eine solide Disc (Standard)
Um eine Aufzählungsliste zu erstellen, erstellen Sie ein <ul>-Element und setzen Sie das list-style-type-Attribut auf den gewünschten Wert.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Kreis – Ein hohler Kreis
Mit dem folgenden Code können Sie Aufzählungszeichen für Hohlkreise erstellen.
Code:
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Quadrat – Ein gefülltes Quadrat
Mit dem folgenden Code können Sie quadratische Aufzählungszeichen erstellen.
<p>The list of developed countries :</p>
<ul style="list-style-type: square;">
<li>US</li>
<li>Australia</li>
<li>New Zealand</li>
</ul>
Keine – Keine Markierung
Es gibt den folgenden Code für die Liste ohne Aufzählungspunkte.
<ul style="list-style-type: none;">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
Zentrieren Sie Aufzählungszeichen in HTML
Codebeispiel:
<!DOCTYPE html>
<head>
<style>
.parent {
text-align: center;
}
.parent > ul {
display: inline-block;
}
</style>
</head>
<body>
<h1>Center Bullet Points in HTML</h1>
<div class="parent">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<br>
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<br>
<ul style="list-style-type: square;">
<li>US</li>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</div>
</body>
Abschluss
Aufzählungszeichen werden in HTML mit CSS und JavaScript zentriert. Mithilfe von Tags kann in HTML eine Liste mit Aufzählungszeichen erstellt werden.
HTML bietet einige verschiedene Möglichkeiten, Aufzählungszeichen zu erstellen, und die typischste Methode ist die Verwendung des ungeordneten Listenelements. Dieses Element erstellt einen Aufzählungspunkt für jedes Listenelement, und Sie können auch das geordnete Listenelement verwenden, um nummerierte Aufzählungspunkte zu erstellen.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn