Hvordan lage en rett uordnet liste i CSS

Hvordan lage en rett uordnet liste i CSS


Front-end webutviklere bruke sorterte lister for å gi struktur til en hel rekke ulike webside triks og effekter som spenner fra enkle punktlister til kompliserte drop-down menyer og bildeskyveknapper. Alle ambisiøse Web designer eller utvikler bør lære det grunnleggende styling sorterte lister ved hjelp av CSS-koden. For å lage en rett, horisontal liste over elementer i CSS, for eksempel, må du vite hvordan du tilordner flyter, padding og marginer.

Bruksanvisning

1 Skriv inn teksten til din sorterte liste i HTML-filen på websiden. Sett hvert listepunkt på en egen linje for lettere lesing og redigering av koden. Pakk hvert listepunkt i åpning og lukking <li> tags. Du bør alltid lukke disse kodene for enklere styling og redigering senere. Her er et eksempel listeelement:

<Li> Dette er litt tekst som utgjør en listepunkt. </ Li>

2 Legg til en ny linje over listeelementene og skriv din <ul> tag der. Legg til en ny linje under listen og skriver den avsluttende </ ul> tag. Innenfor <ul> tag, stille inn ID-attributtet til en unik og meningsfullt navn. Du vil bruke denne ID-en i CSS-koden. Her er et eksempel på <ul> tag i bruk:

<Ul id = "straight">

<Li> Listeelement 1 </ li>

<Li> Listeelement 2 </ li>

</ Ul>

3 Åpne CSS-filen for din nettside eller legge til åpning og lukking <style> kodene mellom <head> -kodene i HTML-fil. Skriv inn CSS-koden inn i CSS-filen eller mellom <style> koder. Sett "flyte" tilhører dine <li> tags til "venstre" slik at hvert listepunkt vil flyte opp mot venstre kant av den siste. Her er en CSS-kode:

rett li {float: left;}

Merk at "#straight" velger <li> tags innen noen tag gitt en ID fra "straight".

4 Legg marginer og padding til <li> koder i CSS til verdensrommet hvert listepunkt, som så:

rett li {float: left; margin-right: 10px; margin-left: 10px; padding: 5px;}

Stil på <li> tags slik du vil, noe som gir elementene sine egne bakgrunner, tekst farger og skrifttyper etter behov. Du kan også fjerne punkt ved å sette "list-style" til "none".

Hint

  • Når du oppretter en rett, sorterte liste for bruk som en meny på dine websider, legge padding til <a> koder for å gjøre dem lettere å klikke. All polstring rundt koblingen vil bli klikkbare.
  • Alltid sikkerhetskopiere HTML og CSS-filer når du redigerer websider.