Come allineare un elenco non ordinato in HTML

Contenuto

• indicazioni

I web designer usano liste "non ordinate" o "segnalibri" per qualcosa di più della semplice aggiunta di segnalibri e testo. Il tag HTML utilizzato per creare elenchi non ordinati è utile per creare menu e organizzare le immagini per un JavaScript da caricare in una presentazione. Imparare come usare il CSS (Cascading Style Sheet) insieme a questi elenchi aprirà molte possibilità di web design. Allineare liste non ordinate è un'abilità molto importante da migliorare.

indicazioni

Usa il codice CSS per allineare gli elenchi non ordinati in HTML (Jupiterimages / Photos.com / Getty Images)

1. Apri il file HTML che contiene l'elenco non ordinato e osserva i tag e , nella parte superiore del codice. Aggiungi tag> e se non sono già presenti. Se il tuo codice include un tag

2. da qualche parte dopo, e contiene un riferimento a un file CSS, aprire quel file. Il tuo codice CSS andrà tra> e o in una nuova riga del tuo file CSS.

3. Allinea il testo all'interno dei segnalibri impostando la proprietà "text-align" del tuo tag

   . Questo riguarda i tag
   • e
   per definirli come parte di una singola lista. Quando allinea il testo nel tag
   , tutti gli elementi nell'elenco saranno interessati, ma non la lista stessa, a sinistra oa destra della pagina. Un esempio di utilizzo del codice CSS per impostare la proprietà "text-align", utilizzare "ul {text-align: right;}". Nota che i marcatori non si muoveranno con il testo. In questo caso, saranno a sinistra.

4. Allinea l'intero elenco a sinistra oa destra della pagina impostando la proprietà "float" del tag

   . Questa proprietà ha effetto sull'intero elenco spostandolo a sinistra oa destra della pagina. Scrivi il codice "ul {float: right;}".

   È possibile impostare questa proprietà a sinistra o a destra, ma non al centro.

   
   

5. Avvolgi i tuoi tag

   con i tag e per creare un wrap che centrerà l'elenco sulla pagina. Il codice sarà simile a questo: "
   • Elenco dell'elemento
   • Elenco dell'elemento
   '.

   Il tag non allineerà nulla da solo; dovresti usare i CSS per centrare tutto. Aggiungi il seguente codice tra i tag> o nel tuo file CSS per centrare l'elenco: "div {display: block; text-align: center;} ul {display: inline-block; text-align: left;}".