Hvordan Juster en punktliste i HTML
Webdesignere bruke punktlister for mer enn bare å legge til kuler og tekst. HTML-koden som brukes for å lage punktlister er nyttig for å lage menyer eller organisere bildene for Javascript for å laste inn en lysbildefremvisning. Lære å bruke gjennomgripende stilark kode i forbindelse med punktlister - kalt "sorterte lister" i HTML slang - vil åpne opp flere spennende Web-design muligheter.
Bruksanvisning
1 Åpne HTML-fil som inneholder punktliste og ser mellom <head> og </ head> taggene mot toppen av koden. Legg til <style> og </ style> -kodene hvis de ikke allerede finnes. Hvis koden inneholder en <link> -taggen sted etter <head> -taggen, og at <link> inneholder en referanse til en CSS-fil, og åpne opp filen i stedet. CSS-kode går mellom <style> og </ style> -kodene eller på en ny linje av CSS-fil.
2 Juster teksten i alle kuler ved å sette "text-align" for din <ul> tag. Den <ul> tag flyter rundt på <li> og </ li> tags for å definere dem som en del av en enkelt liste. Når du justere tekst for <ul> tag, påvirker justeringen teksten i hver kule, men ikke justere selve lista til venstre eller høyre på siden. Her er et eksempel på CSS-kode for å sette "text-align":
ul {text-align: right;}
Merk at kulene ikke flytte med teksten. Kulene holde til venstre i dette tilfellet.
3 Juster hele listen til venstre eller til høyre på siden ved å sette "flyte" for din <ul> tag. Når "flyte" er satt til venstre eller høyre på en <ul> tag, den beveger seg hele punktlisten til venstre eller høyre på siden. Sett float som dette:
ul {float: right;}
Du kan stille "flyte" til venstre eller høyre, men ikke til sentrum.
4 Pakk <ul> taggene i <div> og </ div> tagger for å lage en wrapper som vil sentrere punktliste på siden din. Din resultatkoden se slik ut:
<Div>
<Ul>
<li>List Item</li>
<li>List Item</li>
</ Ul>
</ Div>
Den <div> tag ikke sentrere noe av seg selv; du må bruke CSS for å sentrere alt. Legg til følgende kode mellom <style> tags eller i CSS-fil for å sentrere punktliste:
div {display: block; text-align: center;}
ul {display: inline-block; text-align: left;}
Hint
- Bruk CSS-kode på punktlister i HTML for å lage menyer. Innstilling <li> tags til å flyte til venstre gjør dem stille opp mot hverandre, og innstillingen "list-style" til "ingen" for <ul> tag gjør kulene forsvinne. Etter det, stil punktlisten med farger og mellomrom for å passe utformingen av websiden.