Video: Tutoriales Haskell - 13 Listas Intencionales Dobles @JoseCodFacilito 2024
Noen ganger vil du ha horisontale knappestenger. Fordi HTML5-lister pleier å være vertikale, kan du bli fristet til å tro at en horisontal liste er umulig. Faktisk gir CSS3 alt du trenger for å konvertere nøyaktig samme HTML til en horisontal liste.
Det er ikke nødvendig å vise HTML-en på nytt fordi den ikke har endret seg i det hele tatt. (Er ikke CSS grand?) Selv CSS har ikke endret seg mye:
#menu ul {margin-left: -2. 5em;} #menu li {listestil-type: none; bredde: 7em; tekst-align: center; float: left;} #menu a {text-decoration: none; farge svart; skjerm: blokk; bakgrunnsfarge: #EEEEFF; boks-skygge: 5px 5px 5px grå; margin-bunn: 2px; margin-høyre: 2px; border-radius: 5px; border: 3px start #EEEEFF;} #menu a: svever {bakgrunns-farge: #DDDDEE; boks-skygge: 3px 3px 3px grå; grense: ingen;}
Modifikasjonene er utrolig enkle:
-
Float hver liste element ved å gi hver li en float: venstre verdi:
#menu li {listestil-type: none; flyte: venstre; bredde: 5em; text-align: center;}
-
Flytt marginens venstre på hele ul ved å ta formateringen med margin-venstre fra li-elementene og overfør den til ul:
#menu ul {margin-left: -2. 5em;}
-
Legg til en høyre margin.
Nå som knappestangen er horisontal, legg til litt plass til høyre for hver knapp slik at de ikke ser så overfylt sammen:
margin-høyre: 2px;