Come sbarazzarsi di punti elenco in CSS

Per impostazione predefinita, quando un browser Web visualizza un elenco non ordinato in una pagina Web, ogni elemento nell'elenco ha un punto elenco precedente. Questo comportamento non è sempre desiderabile e potrebbe non adattarsi al design generale della pagina. Utilizzando CSS, puoi creare una classe per rimuovere i punti elenco da elenchi specifici sulla tua pagina, oppure puoi scegliere come target il tag HTML "ul" direttamente per rimuovere i punti elenco da tutti gli elenchi sulla pagina.

1

Crea una nuova pagina HTML in un editor di testo o in un'applicazione di sviluppo Web.

2

Crea un semplice elenco non ordinato aggiungendo il seguente codice HTML al corpo della pagina:

  • Articolo 1
  • Articolo 2
  • Articolo 3

Salvare la pagina e visualizzarla in un browser Web. Vedrai che il browser visualizza un punto elenco accanto a ciascun elemento nell'elenco.

3

Aggiungi il codice seguente alla sezione della pagina:

Ciò rimuove i punti elenco da qualsiasi elenco utilizzando la classe "myList". Salvare la pagina e ricaricare nel browser Web per visualizzare le modifiche.

4

Modifica la regola CSS:

.myList {list-style-type: none;}

Per:

ul {tipo-stile-elenco: nessuno; }

Questo prende di mira il tag HTML "ul" e rimuove i punti elenco da tutti gli elenchi non ordinati sulla pagina. Aggiungere un secondo elenco di esempio e visualizzare la pagina nel browser Web per verificare che entrambi gli elenchi vengano visualizzati senza punti elenco.