Slik senterer du en horisontal liste i en Div i CSS

Innhold

• retninger

Når du oppretter en nettside, kan det være nyttig å bruke CSS til å sentrere en horisontal liste, for eksempel en klikkbar meny. Du kan bruke CSS, som er et stilarksspråk, ved siden av HTML for å kontrollere utseendet på siden din. CSS-stiler vises ofte uforutsigbart i forskjellige nettlesere, så det er viktig å teste siden din grundig før du legger ut den. En uordnet liste (ul) er et blokknivåelement, slik at du kan bruke breddeegenskapen til å opprette en sentralisert effekt.

retninger

Du kan bruke CSS og HTML til å kontrollere utseendet til websiden din (Comstock / Stockbyte / Getty Images)

1. Åpne HTML-filen din i et tekstredigeringsprogram, for eksempel Windows Notisblokk.

2. Legg til de nødvendige CSS-stilene til den horisontale listen i "" delen av HTML-filen din ved å legge til følgende kode:

   type = "text / css"> .myclass {text-align: center; } .myclass ul {bredde: 275px; margin: 0px auto} .myclass li {display: block; flyte: venstre; høyde: 50px; linjehøyde: 50px; margin: 5px; bredde: 125px; grense: solid 1px svart; }

   Bredden på listen (ul) representerer summen av bredden og margene til de horisontale elementene (li).

3. Opprett en horisontal liste i delen ">" i HTML-filen ved å legge til følgende kode:

   
   
   • første gjenstand
   • andre element i div

   "Ul" -taggen angir en uordnet liste. "Li" -taggen tilsvarer et element i listen. Listeposter bruker CSS-stiler som samsvarer med de som er definert ovenfor.

4. Lagre HTML-filen og last den på webserveren din for å vise den horisontale, sentrerte listen.