So zentrieren Sie eine horizontale Liste in einer Div in CSS

Inhalt

• Anweisungen

Bei der Erstellung einer Webseite kann es hilfreich sein, CSS zu verwenden, um eine horizontale Liste zu zentrieren, beispielsweise ein anklickbares Menü. Sie können CSS (eine Stylesheet-Sprache) neben HTML verwenden, um das Erscheinungsbild Ihrer Seite zu steuern. CSS-Stile werden oft unvorhersehbar in verschiedenen Webbrowsern angezeigt. Daher ist es wichtig, Ihre Seite gründlich zu testen, bevor Sie sie veröffentlichen. Eine ungeordnete Liste (ul) ist ein Element auf Blockebene. Sie können also die width -Eigenschaft verwenden, um einen zentralisierten Effekt zu erstellen.

Anweisungen

Sie können CSS und HTML verwenden, um das Erscheinungsbild Ihrer Webseite zu steuern (Comstock / Stockbyte / Getty Images)

1. Öffnen Sie Ihre HTML-Datei in einem Texteditor wie z. B. Windows Notepad.

2. Fügen Sie der horizontalen Liste im Abschnitt Ihrer HTML-Datei die erforderlichen CSS-Stile hinzu, indem Sie den folgenden Code hinzufügen:

   type = "text / css"> .myclass {text-align: center; } .myclass ul {width: 275px; Marge: 0px auto} .myclass li {display: block; Schwimmer: links; Höhe: 50px; Zeilenhöhe: 50px; Marge: 5px; Breite: 125px; Rand: fest 1px schwarz; }

   Die Breite der Liste (ul) repräsentiert die Summe der Breite und der Ränder der horizontalen Elemente (li).

3. Erstellen Sie eine horizontale Liste im Abschnitt ">" der HTML-Datei, indem Sie den folgenden Code hinzufügen:

   
   
   • erster Artikel
   • zweiter Punkt in div

   Das "ul" -Tag gibt eine ungeordnete Liste an. Das "li" -Tag entspricht einem Element in der Liste. Listenelemente verwenden CSS-Stile, die den oben definierten entsprechen.

4. Speichern Sie die HTML-Datei und laden Sie sie auf Ihren Webserver, um die horizontale, zentrierte Liste anzuzeigen.