Wie man eine gerade ungeordnete Liste in CSS

August 4

Wie man eine gerade ungeordnete Liste in CSS

Front-End-Web-Entwickler nutzen ungeordnete Listen eine ganze Reihe von anderen Webseite Tricks und Effekte, die von einfachen Kugel Listen bis hin zu komplizierten Drop-Down-Menüs und Bild Schieberegler Struktur anzubieten. Jeder angehende Webdesigner oder Entwickler sollten lernen die Grundlagen der ungeordnete Listen mit CSS-Code formatieren. Um eine gerade, horizontale Liste von Elementen in CSS zu erstellen, müssen Sie z. B. wissen, wie man schwimmt, Textabstand und Ränder zuweisen.

Anweisungen

1 Geben Sie den Text für Ihre ungeordnete Liste, in der HTML-Datei Ihrer Webseite. Jedes Listenelement in einer eigenen Zeile für einfacher lesen und Bearbeiten von Code zu setzen. Wickeln Sie jedes Listenelement in öffnende und schließende Tags < li >. Sie sollten immer schließen diese Tags für einfacher Styling- und später bearbeiten. Hier ist ein Beispiel-Liste-Element:

Text, der macht eine List Item. </li > < li > Dies ist

2 Füge eine neue Zeile oberhalb der Listenelemente und geben Sie dort Ihre < Ul >-Tag. Fügen Sie eine neue Zeile unterhalb der Liste, und geben Sie Ihr schließen/< ul >-Tag. Innerhalb des Tags < Ul > legen Sie das ID-Attribut auf einen eindeutige und aussagekräftige Namen. Sie verwenden diese ID in CSS-Code. Hier ist ein Beispiel für die < Ul >-Tag im Einsatz:

< Ul Id = "gerade" >

< li > Listenelement 1 </li >

< li > Listenelement 2 </li >

</ul >

3 Öffnen der. CSS Datei für Ihre Website oder öffnende und schließende Tags < Stil > zwischen den < Head >-Tags der HTML-Datei hinzufügen. Geben Sie Ihre CSS-Code in der. CSS-Datei oder zwischen den < Style >-Tags. Legen Sie die Eigenschaft "Float" Ihre < li > Schilder nach "Links", so dass jedes Listenelement gegen den linken Rand des letzten schwimmt. Hier ist der CSS-Code:

geraden li {Float: left;} Beachten Sie, dass "#straight" wählt die < li >-Tags innerhalb jedes Tag angesichts die ID "gerade."

4 Fügen Sie Ränder und Polsterung um Ihre < li > Tags in CSS Raum jedes Listenelement, etwa so:

gerade li {Schwimmer: linken; Margin-Right: 10px; Rand Links: 10px; padding: 5px;} Stil der < li > kennzeichnet Sie jedoch die Elemente geben, eigene Hintergründe, Farben und Schriftarten nach Bedarf. Sie können auch Aufzählungszeichen entfernen, durch die Einstellung "List-Style" auf "none".

Tipps & Warnungen

  • Beim Erstellen einer geraden, ungeordneten Liste zur Verwendung als Menü auf Ihren Webseiten fügen Sie Polsterung der < a >-Tags um sie leichter zu klicken hinzu. Alle Polsterung um den Link werden anklickbar.
  • Sichern Sie Ihre HTML- und CSS-Dateien immer beim Bearbeiten von Webseiten.