Usa il codice CSS per allineare gli elenchi puntati in HTML.
I web designer utilizzano elenchi puntati per qualcosa di più della semplice aggiunta di punti elenco e testo. Il tag HTML utilizzato per creare elenchi puntati è utile per creare menu o organizzare immagini per un JavaScript da caricare in una presentazione. Imparare a utilizzare il codice del foglio di stile a cascata in combinazione con elenchi puntati - chiamati "elenchi non ordinati" in gergo HTML - aprirà diverse interessanti possibilità di progettazione Web.
Passo 1
Apri il file HTML contenente l'elenco puntato e guarda tra i tag e verso la parte superiore del codice. Aggiungi tag se non sono già presenti. Se il tuo codice include a taggare da qualche parte dopo il tag, e questo contiene un riferimento a un file CSS, quindi apri invece quel file. Il tuo codice CSS va tra i tag o su una nuova riga del tuo file CSS.
Video del giorno
Passo 2
Allinea il testo all'interno di tutti i punti elenco impostando "text-align" per il tuo
- etichetta. Il
- e tag per definirli come parte di un unico elenco. Quando allinei il testo per il
- il tag avvolge il
- tag, l'allineamento influisce sul testo in ogni punto elenco ma non allinea l'elenco stesso a sinistra oa destra della pagina. Ecco un esempio di codice CSS per impostare "text-align":
ul {text-align: right;}
Notare che i punti elenco non si spostano con il testo. I proiettili rimangono a sinistra in questo caso.
Passaggio 3
Allinea l'intero elenco a sinistra oa destra della pagina impostando "float" per il tuo
- etichetta. Quando "float" è impostato a sinistra o a destra su a
- tag, sposta l'intero elenco puntato a sinistra oa destra della pagina. Imposta float in questo modo:
ul {flottante: a destra;}
Puoi impostare "float" a sinistra oa destra, ma non al centro.
Passaggio 4
Avvolgi il tuo
- tag in
e
tag per creare un wrapper che centra l'elenco puntato sulla tua pagina. Il codice risultante sarà simile a questo:- Voce di elenco
- Voce di elenco
Il
il tag non centra nulla da solo; devi usare CSS per centrare tutto. Aggiungi il seguente codice tra i tuoi
