Elenchi non ordinati HTML
Il <ul>tag HTML definisce un elenco non ordinato (puntato).
Elenco HTML non ordinato
Un elenco non ordinato inizia con il <ul>tag. Ciascun elemento dell'elenco inizia con il
<li>tag.
Per impostazione predefinita, gli elementi dell'elenco saranno contrassegnati da punti elenco (piccoli cerchi neri):
Esempio
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Elenco HTML non ordinato: scegli l'indicatore dell'elemento dell'elenco
La proprietà CSS list-style-typeviene utilizzata per definire lo stile dell'indicatore dell'elemento dell'elenco. Può avere uno dei seguenti valori:
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
Esempio - Disco
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Esempio - Cerchio
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Esempio: quadrato
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Esempio - Nessuno
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Elenchi HTML nidificati
Gli elenchi possono essere nidificati (elenco all'interno dell'elenco):
Esempio
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Nota: una voce di elenco ( <li>) può contenere un nuovo elenco e altri elementi HTML, come immagini e collegamenti, ecc.
Elenco orizzontale con CSS
Gli elenchi HTML possono essere stilizzati in molti modi diversi con i CSS.
Un modo popolare è modellare un elenco orizzontalmente, per creare un menu di navigazione:
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Suggerimento: puoi imparare molto di più sui CSS nel nostro Tutorial CSS .
Riassunto capitolo
- Utilizzare l'elemento HTML
<ul>per definire un elenco non ordinato - Utilizzare la proprietà CSS
list-style-typeper definire l'indicatore dell'elemento dell'elenco <li>Utilizzare l' elemento HTML per definire una voce di elenco- Gli elenchi possono essere nidificati
- Gli elementi dell'elenco possono contenere altri elementi HTML
- Utilizzare la proprietà CSS
float:leftper visualizzare un elenco in orizzontale
Tag elenco HTML
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .