Använd CSS-kod för att justera punktlistor i HTML.
Webbdesigners använder punktlistor för mer än att bara lägga till punktlistor och text. HTML-taggen som används för att skapa punktlistor är praktisk för att skapa menyer eller organisera bilder för att ett JavaScript ska laddas in i ett bildspel. Att lära sig att använda överlappande stilmallskod tillsammans med punktlistor - kallade "oordnade listor" i HTML-slang - kommer att öppna upp flera spännande möjligheter för webbdesign.
Steg 1
Öppna din HTML-fil som innehåller punktlistan och titta mellan taggarna och mot toppen av koden. Lägg till taggar om de inte redan finns. Om din kod innehåller en taggen någonstans efter taggen, och det innehåller en referens till en CSS-fil, öppna sedan den filen istället. Din CSS-kod går mellan taggarna eller på en ny rad i din CSS-fil.
Dagens video
Steg 2
Justera texten inom alla punkter genom att ställa in "text-align" för din
- märka. De
- och taggar för att definiera dem som en del av en enda lista. När du justerar text för
- taggen sveper runt
- taggen, påverkar justeringen texten i varje punkt men justerar inte själva listan till vänster eller höger på sidan. Här är ett exempel på CSS-kod för att ställa in "text-align":
ul {text-align: right;}
Observera att kulorna inte rör sig med texten. Kulorna stannar till vänster i det här fallet.
Steg 3
Justera hela listan till vänster eller höger på sidan genom att ställa in "flyta" för din
- märka. När "float" är satt till vänster eller höger på a
- taggen flyttar den hela punktlistan till vänster eller höger om sidan. Ställ flyten så här:
ul {flyta: höger;}
Du kan ställa in "float" till vänster eller höger, men inte till mitten.
Steg 4
Slå in din
- taggar in
och
taggar för att skapa ett omslag som kommer att centrera punktlistan på din sida. Din resulterande kod kommer att se ut så här:- Listobjekt
- Listobjekt
De
taggen centrerar ingenting av sig själv; du måste använda CSS för att centrera allt. Lägg till följande kod mellan din
