Kako poravnati popis za nabrajanje u HTML-u

...

Koristite CSS kod za poravnavanje popisa s grafičkim oznakama u HTML-u.

Web dizajneri koriste popise s oznakama za više od samog dodavanja oznaka i teksta. HTML oznaka koja se koristi za izradu popisa s grafičkim oznakama zgodna je za stvaranje izbornika ili organiziranje slika za JavaScript za učitavanje u dijaprojekciju. Učenje korištenja kaskadnog koda sa stilskim listovima u kombinaciji s popisima za nabrajanje - koji se u HTML slengu nazivaju "neuređeni popisi" - otvorit će nekoliko uzbudljivih mogućnosti web-dizajna.

Korak 1

Otvorite svoju HTML datoteku koja sadrži popis s grafičkim oznakama i pogledajte između oznaka i prema vrhu koda. Dodajte oznake ako već nisu prisutne. Ako vaš kod uključuje a tag negdje iza oznake, i to sadrži referencu na CSS datoteku, a zatim umjesto toga otvorite tu datoteku. Vaš CSS kod ide između oznaka ili u novi redak vaše CSS datoteke.

Video dana

Korak 2

Poravnajte tekst unutar svih grafičkih oznaka postavljanjem "text-align" za svoje

    označiti. The
      oznaka omota oko
    • i
    • oznake kako biste ih definirali kao dio jednog popisa. Kada poravnate tekst za
        oznaku, poravnanje utječe na tekst u svakoj oznaci, ali ne poravna sam popis s lijeve ili desne strane stranice. Evo primjera CSS koda za postavljanje "text-align":

ul {text-align: right;}

Imajte na umu da se metke ne pomiču s tekstom. U ovom slučaju meci ostaju lijevo.

Korak 3

Poravnajte cijeli popis s lijeve ili desne strane stranice tako što ćete postaviti "float" za svoj

    označiti. Kada je "float" postavljen na lijevo ili desno na a
      tag, pomiče cijeli popis s grafičkim oznakama lijevo ili desno od stranice. Postavite float ovako:

ul {float: desno;}

Možete postaviti "plutanje" lijevo ili desno, ali ne i središte.

4. korak

Zamotajte svoje

    oznake u

    i

    oznake za stvaranje omota koji će centrirati popis s grafičkim oznakama na vašoj stranici. Vaš rezultirajući kod će izgledati ovako:
  • Stavka popisa
  • Stavka popisa

The

oznaka ne centrira ništa sama po sebi; morate koristiti CSS za centriranje svega. Dodajte sljedeći kod između vaših