Come allineare un elenco puntato 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 il caricamento di un JavaScript in una presentazione. Imparare a usare il codice del foglio di stile a cascata insieme agli elenchi puntati -- chiamati "elenchi non ordinati" nel gergo HTML -- aprirà diverse interessanti possibilità di progettazione Web.
Passaggio 1
Apri il tuo file HTML contenente l'elenco puntato e cerca tra i file
e tag verso la parte superiore del codice. Aggiungi tag se non sono già presenti. Se il tuo codice include un tag da qualche parte dopo il e che 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.Passaggio 2
Allinea il testo all'interno di tutti i punti elenco impostando "text-align" per il tag
- . Il tag
- e tag per definirli come parte di un unico elenco. Quando allinei il testo per il tag
- Elenco elemento
- Elenco elemento
- avvolge il
- , 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;}
Si noti che i punti elenco non si spostano con il testo. I proiettili restano a sinistra in questo caso.
Passaggio 3
Allinea l'intero elenco a sinistra oa destra della pagina impostando "float" per il tag
- . Quando "float" è impostato su sinistra o destra su un tag
- , sposta l'intero elenco puntato a sinistra oa destra della pagina. Imposta float in questo modo:
ul {flottante:destra;}
Puoi impostare "flottante" a sinistra oa destra, ma non al centro.
Passaggio 4
Avvolgi i tuoi tag
- e i tag per creare un wrapper che centra l'elenco puntato sulla tua pagina. Il codice risultante sarà simile a questo:
Il tag non centra nulla da solo; devi usare CSS per centrare tutto. Aggiungi il seguente codice tra i tag