Hvordan Juster en punktliste i HTML

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>

&lt;li>List Item&lt;/li>
&lt;li>List Item&lt;/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.