Verwenden Sie CSS-Code, um Listen mit Aufzählungszeichen in HTML auszurichten.
Webdesigner verwenden Aufzählungslisten für mehr als nur das Hinzufügen von Aufzählungszeichen und Text. Das HTML-Tag, das zum Erstellen von Aufzählungslisten verwendet wird, ist praktisch, um Menüs zu erstellen oder Bilder zu organisieren, damit ein JavaScript in eine Diashow geladen wird. Das Erlernen der Verwendung von Cascading Stylesheet-Code in Verbindung mit Aufzählungslisten – im HTML-Slang als „ungeordnete Listen“ bezeichnet – wird mehrere aufregende Möglichkeiten des Webdesigns eröffnen.
Schritt 1
Öffnen Sie Ihre HTML-Datei, die die Aufzählungsliste enthält, und suchen Sie zwischen den und -Tags nach oben im Code. Fügen Sie Tags hinzu, falls diese noch nicht vorhanden sind. Wenn Ihr Code ein enthält Tag irgendwo nach dem Tag, und das einen Verweis auf eine CSS-Datei enthält, öffnen Sie stattdessen diese Datei. Ihr CSS-Code steht zwischen den Tags oder in einer neuen Zeile Ihrer CSS-Datei.
Video des Tages
Schritt 2
Richten Sie den Text innerhalb aller Aufzählungszeichen aus, indem Sie "text-align" für Ihr einstellen
- Schild. Der
- und Tags, um sie als Teil einer einzelnen Liste zu definieren. Beim Ausrichten von Text für die
- Tag umschließt die
- -Tag wirkt sich die Ausrichtung auf den Text in jedem Aufzählungszeichen aus, richtet die Liste selbst jedoch nicht links oder rechts auf der Seite aus. Hier ist ein Beispiel für CSS-Code zum Festlegen von "text-align":
ul {Textausrichtung: rechts;}
Beachten Sie, dass sich die Aufzählungszeichen nicht mit dem Text bewegen. Die Kugeln bleiben in diesem Fall links.
Schritt 3
Richten Sie die gesamte Liste links oder rechts von der Seite aus, indem Sie "float" für Ihre
- Schild. Wenn "float" auf links oder rechts auf a eingestellt ist
- -Tag wird die gesamte Aufzählungsliste nach links oder rechts auf der Seite verschoben. Schwimmer wie folgt einstellen:
ul {float: richtig;}
Sie können "float" nach links oder rechts setzen, aber nicht in die Mitte.
Schritt 4
Wickeln Sie Ihre
- Tags in
und
-Tags, um einen Wrapper zu erstellen, der die Aufzählungsliste auf Ihrer Seite zentriert. Ihr resultierender Code sieht wie folgt aus:- Listenpunkt
- Listenpunkt
Der
Tag zentriert nichts von selbst; Sie müssen CSS verwenden, um alles zu zentrieren. Fügen Sie den folgenden Code zwischen Ihrem
