Wie eine Aufzählung in HTML ausgerichtet

April 28

Wie eine Aufzählung in HTML ausgerichtet

Web-Designer verwenden Kugel-Listen für das Hinzufügen von mehr als nur Text und Aufzählungszeichen. Das HTML-Tag verwendet, um die Kugel-Listen zu erstellen ist praktisch für Erstellen von Menüs oder Bilder für ein JavaScript laden in einer Diashow zu organisieren. Lernen mithilfe von CSS Stil Blatt Code in Verbindung mit Kugel-Listen--namens "ungeordnete Listen" in HTML-Slang--öffnet sich mehrere spannende Web-Design-Möglichkeiten.

Anweisungen

1 Öffnen Sie Ihre HTML-Datei, enthält die Aufzählung und suchen zwischen < Head > und < / Head > Markierungen zur Spitze des Codes. Fügen Sie < Stil > und < / style > Stichworte, wenn sie nicht bereits vorhanden sind. Wenn Ihr Code einen < Link >-Tag irgendwo hinter dem < Head >-Tag enthält, und das < Link > einen Verweis auf eine CSS-Datei enthält, dann öffnen Sie diese Datei stattdessen. Der CSS Code geht zwischen den < Stil > und < / style >-Tags bzw. in einer neuen Zeile der CSS Datei.

2 Ausrichten von Text in alle Kugeln von "Textausrichtung festlegen" für Ihr < Ul >-Tag. Das Tag < Ul > umfließt die < li > </li > Tags zu definieren als Teil einer einzigen Liste und. Wenn Sie Text für das Tag < Ul > ausrichten, wird die Ausrichtung betrifft Text in jeder Kugel aber wird nicht die Liste selbst nach links oder rechts auf der Seite ausgerichtet. Hier ist ein Beispiel für CSS-Code festlegen "Textausrichtung":

UL {Text-align: right;}

Hinweis, das die Kugeln nicht mit Verschieben des Textes. Die Kugeln bleiben in diesem Fall nach links.

3 Richten Sie die gesamte Liste nach links oder rechts auf der Seite von Einstellung "Float" für Ihr < Ul >-Tag. Wenn "Float" nach links oder rechts auf ein < Ul >-Tag festgelegt ist, verschiebt es die gesamte Aufzählung nach links oder rechts auf der Seite. Set-Float wie folgt:

UL {Float: right;}

Sie können festlegen, "schweben", nach links oder rechts, aber nicht in die Mitte.

4 Umschließen Sie Ihre Tags < Ul > < Div > und < / Div > Tags, um einen Wrapper zu erstellen, die die Aufzählung auf der Seite zentriert wird. Der resultierende Code wird wie folgt aussehen:

< Div >< Ul >

&lt;li>List Item&lt;/li> &lt;li>List Item&lt;/li>

</ul >< / Div >

< Div >-Tag alles nicht von selbst zentriert; Sie müssen CSS verwenden, um alles zu zentrieren. Fügen Sie den folgenden Code zwischen Ihrem < Style >-Tags oder Ihrer CSS-Datei um die Aufzählung zu zentrieren:

Div {anzeigen: block; Text-align: center;}UL {display: Inline-Block; Textausrichtung: Links;}

Tipps & Warnungen

  • Verwenden Sie CSS-Code auf Aufzählungen in HTML, um Menüs zu erstellen. Setzen < li > Tags in Float auf der linken macht sie Linie gegeneinander und Einstellung "List-Style" auf "none" für das < Ul >-Tag macht die Kugeln verschwinden. Nach dem Stil der Aufzählungsliste mit Farben und Abstände an das Design Ihrer Webseite anpassen.