Wie bauen Horizontal-Listen für HTML5 und CSS3 Programmierung

Manchmal wollen Sie horizontale Symbolleisten. Da HTML5-Listen sind in der Regel senkrecht zu sein, werden Sie möglicherweise, dass eine horizontale Liste nicht möglich ist, versucht zu denken. In der Tat bietet CSS3 alles, was Sie genau die gleiche HTML in eine horizontale Liste konvertieren müssen.

Es gibt keine Notwendigkeit, den HTML wieder zu zeigen, weil es überhaupt nicht verändert hat. (Ist das nicht CSS grand?) Auch die CSS nicht viel geändert hat:

#menu ul {margin-left: -2.5em -} # Menü li {list-style-type: none; Breite: 7em-text-align: center-float: left;} # Menü a {text-decoration: none; Farbe: schwarz-display: block-background-color: # EEEEFF-box-shadow: 5px 5px 5px grau-margin-bottom: 2px; margin-right: 2px; border-radius: 5px; border: 3px Anfang # EEEEFF-} #menu a: Hover {background-color: # DDDDEE-box-shadow: 3px 3px 3px grau-border: none;}

Die Änderungen sind denkbar einfach:

1. Schwimmer jedes Listenelement durch jede Angabe li ein float: left Wert:

   #menu li {list-style-type: none; float: left; width: 5em-text-align: Zentrum}

2. Beweg das margin-left der gesamte ul durch die Einnahme margin-left Formatierung von der li Elemente und an die Übertragungs ul:

   #menu ul {margin-left: -2.5em-}

3. Fügen Sie einen rechten Rand.

   Nun, da die Buttonleiste horizontal ist, ein wenig Platz auf der rechten Seite jeder Taste hinzufügen, damit sie nicht so zusammengedrängt aussehen:

   margin-right: 2px;