Bruk CSS-kode for å justere punktlister i HTML.
Webdesignere bruker punktlister til mer enn bare å legge til punkttegn og tekst. HTML-taggen som brukes til å lage punktlister er nyttig for å lage menyer eller organisere bilder for en JavaScript som skal lastes inn i en lysbildefremvisning. Å lære å bruke overlappende stilarkkode i forbindelse med punktlister -- kalt "uordnede lister" i HTML-slang -- vil åpne opp for flere spennende muligheter for webdesign.
Trinn 1
Åpne HTML-filen som inneholder punktlisten, og se mellom taggene og mot toppen av koden. Legg til tagger hvis de ikke allerede finnes. Hvis koden din inkluderer en tag et sted etter taggen, og det inneholder en referanse til en CSS-fil, åpne deretter den filen i stedet. CSS-koden din går mellom taggene eller på en ny linje i CSS-filen.
Dagens video
Steg 2
Juster teksten innenfor alle punkt ved å sette "tekstjustering" for din
- stikkord. De
- og koder for å definere dem som en del av en enkelt liste. Når du justerer tekst for
- taggen vikler seg rundt
- koden, påvirker justeringen teksten i hvert punkt, men justerer ikke selve listen til venstre eller høyre på siden. Her er et eksempel på CSS-kode for å sette "tekstjustering":
ul {tekstjustering: høyre;}
Merk at kulene ikke beveger seg med teksten. Kulene holder seg til venstre i dette tilfellet.
Trinn 3
Juster hele listen til venstre eller høyre på siden ved å sette "flyt" for din
- stikkord. Når "float" er satt til venstre eller høyre på en
- -taggen, flytter den hele punktlisten til venstre eller høyre på siden. Sett flyte slik:
ul {flyte: høyre;}
Du kan stille "flyt" til venstre eller høyre, men ikke til midten.
Trinn 4
Pakk inn din
- tagger inn
og
tagger for å lage en innpakning som vil sentrere punktlisten på siden din. Den resulterende koden vil se slik ut:- Listeelement
- Listeelement
De
taggen sentrerer ikke noe av seg selv; du må bruke CSS for å sentrere alt. Legg til følgende kode mellom din
