mercoledì 13 giugno 2018

HTML: lista puntata senza puntini (css)

Tags

Uno dei più vecchi tag html è quello che consente di fare la cosiddetta lista puntata.
Il tag <ul> infatti, con al suo interno gli <li>, consente di generare un elenco indentato fatto di puntini, al seguito dei quali ci sono le classiche liste.

Lo so, peggio di così non potevo spiegarla, per cui ecco qui un esempio di lista puntata html:

  • Rosso
  • Verde
  • Giallo

Bene, ora che tutto è chiaro, vediamo di venire al tema principale di questo tutorial, ovvero le liste puntate senza puntini.
Mettiamo ad esempio di voler elencare una lista di nomi, senza però mettergli vicino né il puntino né il classico numero generato dal tag <ol>, come si può fare? E' presto detto!



Come fare una lista puntata senza puntini con i css


In html, per creare una lista puntata senza punti né simboli vari, in modo tale da avere solo un elenco di parole ben incolonnate, basta utilizzare l'attributo css list-style-type a cui si associa il valore none (nullo).

Ecco un codice d'esempio:
<ul style="list-style-type: none;">
<li>Mario</li>
<li>Antonio</li>
<li>Giovanni</li>
</ul>

Ed ecco il risultato ottenuto:

    Mario
    Antonio
    Giovanni


Direi che non ho altro da aggiungere su questa storia (cit.).

PS Se hai guardato il codice sorgente di questa pagina avrai beccato che ho barato.
Ecco, lasciami spiegare :p
Il fatto che io abbia usato in realtà gli &nbsp; e non la lista puntata con lo stile css appena illustrato, è dovuto al funzionamento del cms blogger, che a quanto pare mi sega quell'attributo e non me lo lascia inserire nei post :)

Piaciuto l'articolo? Lascia un commento!

EmoticonEmoticon