Kako poravnati Bullet List u HTML-u
Web dizajneri koriste popise s grafičkim oznakama za više od pukog dodavanja grafičkih oznaka i teksta. HTML oznaka koja se koristi za stvaranje popisa s grafičkim oznakama zgodna je za stvaranje izbornika ili organiziranje slika za JavaScript za učitavanje u dijaprojekciju. Naučiti koristiti kaskadni stilski kod u kombinaciji s popisima s grafičkim oznakama -- koji se u HTML slengu nazivaju "neuređeni popisi" -- otvorit će vam nekoliko uzbudljivih mogućnosti web-dizajna.
1. korak
Otvorite svoju HTML datoteku koja sadrži popis s grafičkim oznakama i pogledajte između
i oznake prema vrhu koda. Dodajte oznake ako već nisu prisutne. Ako vaš kod uključuje oznaku negdje nakon i sadrži referencu na CSS datoteku, a zatim otvorite tu datoteku. Vaš CSS kôd ide između oznaka ili u novi red vaše CSS datoteke.2. korak
Poravnajte tekst unutar svih grafičkih oznaka postavljanjem "text-align" za svoju oznaku
- . Oznaka
- i oznake kako biste ih definirali kao dio jednog popisa. Kada poravnate tekst za oznaku
- Stavka popisa
- Stavka popisa
- omotava se oko
- , poravnanje utječe na tekst u svim grafičkim oznakama, ali ne poravnava sam popis s lijeve ili desne strane stranice. Ovdje je primjer CSS koda za postavljanje "text-align":
ul {text-align:right;}
Imajte na umu da se grafičke oznake ne pomiču zajedno s tekstom. U ovom slučaju meci ostaju lijevo.
3. korak
Poravnajte cijeli popis s lijeve ili desne strane stranice postavljanjem "float" za oznaku
- . Kada je "float" postavljen na lijevo ili desno na
- oznaci, pomiče cijeli popis s grafičkim oznakama lijevo ili desno od stranice. Postavite float ovako:
ul {float:desno;}
Možete postaviti "lebdjenje" lijevo ili desno, ali ne i središte.
4. korak
Zamotajte svoje
- oznake u i oznake kako biste stvorili omot koji će centrirati popis s grafičkim oznakama na vašoj stranici. Vaš rezultirajući kôd će izgledati ovako:
Oznaka ništa ne centrira sama po sebi; morate koristiti CSS za centriranje svega. Dodajte sljedeći kod između svojih oznaka