Sådan Juster et Bullet liste i HTML
Webdesignere bruger punktopstillinger for mere end blot at tilføje kugler og tekst. HTML-tag bruges til at oprette punktopstillinger er praktisk til at skabe menuer eller organisere billeder til en JavaScript indlæse i et diasshow. At lære at bruge Cascading Style Sheet (CSS) kode sammen med punktopstillinger - kaldet "uordnede lister" i HTML slang - vil åbne mange web-design muligheder. Tilpasning af uordnede lister er en vigtig færdighed at mestre.
Vejledning
• Åbn din HTML-fil, der indeholder den punktopstilling og kigge mellem <head> og </ head> tags mod toppen af koden. Tilføj <style> og </ style> tags, hvis de ikke allerede er til stede. Hvis din kode indeholder et <link> tag et eller andet sted efter <head> tag, og at <link> indeholder en henvisning til en CSS-fil og derefter åbne op, at fil i stedet. Din CSS kode går mellem <style> og </ style> tags eller på en ny linje i din CSS-fil.
• Juster tekst i alle kugler ved at indstille "text-align" til din <ul> tag. Den <ul> tag ombrydes omkring <li> og </ li> tags til at definere dem som en del af en enkelt liste. Når du justere tekst til <ul> tag, justeringen påvirker tekst i hver kugle, men ikke bringe listen selv til venstre eller til højre på siden. Her er et eksempel på CSS kode for at indstille "text-align": ul {text-align: højre;} Bemærk, at kuglerne ikke bevæger med teksten. Kuglerne bo til venstre i dette tilfælde.
• Juster hele listen til venstre eller til højre på siden ved at indstille "flyde" til din <ul> tag. Når "float" er indstillet til venstre eller højre på en <ul> tag, den bevæger sig hele punktopstilling til venstre eller til højre på siden. Sæt float som dette: ul {float: højre;} Du kan indstille "flyde" til venstre eller højre, men ikke til centret.
• Pak dine <ul> tags i <div> og </ div> tags til at oprette en wrapper, der centrerer punktopstilling på din side. Din resulterende kode vil se sådan ud: <div> <ul> <li> Listeemne </ li> <li> Listeemne </ li> </ ul> </ div> Den <div> tag ikke centrere noget ved selv; du skal bruge CSS til at centrere alt. Føj følgende kode mellem dine <style> tags eller i din CSS-fil for at centrere punktopstilling: div {display: block; tekst-align: center;} ul {display: inline-block; tekst-align: left;}