HTML neuspořádané seznamy
HTML <ul>tag definuje neuspořádaný (odrážkový) seznam.
Neuspořádaný seznam HTML
Neuspořádaný seznam začíná <ul>značkou. Každá položka seznamu začíná
<li>značkou.
Položky seznamu budou ve výchozím nastavení označeny odrážkami (malými černými kolečky):
Příklad
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Neuspořádaný seznam HTML – Zvolte značku položky seznamu
Vlastnost CSS list-style-typese používá k definování stylu značky položky seznamu. Může mít jednu z následujících hodnot:
| 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 |
Příklad - Disk
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Příklad - Kruh
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Příklad - čtverec
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Příklad - Žádný
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Vnořené seznamy HTML
Seznamy lze vnořovat (seznam uvnitř seznamu):
Příklad
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Poznámka: Položka seznamu ( <li>) může obsahovat nový seznam a další prvky HTML, jako jsou obrázky a odkazy atd.
Horizontální seznam s CSS
Seznamy HTML lze pomocí CSS stylovat mnoha různými způsoby.
Jedním z populárních způsobů je horizontální stylování seznamu a vytvoření navigační nabídky:
Příklad
<!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>
Tip: Mnohem více o CSS se můžete dozvědět v našem CSS Tutorial .
Shrnutí kapitoly
- Element HTML použijte
<ul>k definování neuspořádaného seznamu - Pomocí vlastnosti CSS
list-style-typedefinujte značku položky seznamu - Element HTML použijte
<li>k definování položky seznamu - Seznamy lze vnořovat
- Položky seznamu mohou obsahovat další prvky HTML
float:leftK zobrazení seznamu vodorovně použijte vlastnost CSS
Značky seznamu 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 |
Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .