Indhold
Webdesignere bruger "unordered" eller "bookmark" lister til mere end blot at tilføje bogmærker og tekst. HTML-mærket, der bruges til at oprette uordnede lister, er nyttigt til at oprette menuer og organisere billeder, så JavaScript kan indlæse en præsentation. At lære at bruge CSS (Cascading Style Sheet) sammen med disse lister åbner mange webdesign muligheder. Aligning unordered lister er en meget vigtig færdighed at forbedre.
retninger
Brug CSS-kode til at justere uordnede lister i HTML (Jupiterimages / Photos.com / Getty Images)-
Åbn HTML-filen, der indeholder den uordnede liste, og se gennem taggerne og , øverst i koden. Tilføj tags> og hvis de ikke allerede er til stede Hvis din kode indeholder et tag
- et eller andet sted efter det, og det indeholder en henvisning til en CSS-fil, skal du åbne den fil. Din CSS-kode vil gå mellem> og eller i en ny linje i din CSS-fil.
-
Juster tekst inden for bogmærker ved at indstille "tag-align" egenskaben for dit tag
- . Dette indebærer tags
- og at definere dem som en del af en enkelt liste. Når du justerer teksten i tagget
- , vil alle elementer på listen blive påvirket, men ikke selve listen, til venstre eller højre på siden. Et eksempel på at bruge CSS-kode til at angive egenskaben "text-align" bruger "ul {text-align: right;}". Bemærk, at markørerne ikke bevæger sig med teksten. I dette tilfælde vil de være til venstre.
-
Juster hele listen til venstre eller højre for siden ved at indstille egenskaben "float" i dit tag
- . Denne egenskab påvirker hele listen ved at flytte den til venstre eller højre på siden. Skriv koden "ul {float: right;}".
Du kan indstille denne egenskab til venstre eller til højre, men ikke til midten.
-
Indhylle dine tags
- med tags og for at oprette en wrap, der vil centrere listen på siden. Koden vil se sådan ud: "
- Liste element
- Liste element
Tagget vil ikke justere noget af sig selv; du bør bruge CSS til at centrere alt. Tilføj følgende kode mellem> taggerne eller i din CSS-fil for at centrere listen: "div {display: block; text-align: center;} ul {display: inline-block; text-align: left;}".