Styly pro nečíslovaný seznam

Vlastnost list-style-type se používá pro definici značky u seznamu.

Hodnota

Popis

disc

značka je plné kolečko

circle

značka je kružnice

square

značka je čtvereček

none

bez značky
Příklad — kolečko
<ul style="list-style-type:disc;">
  <li>káva</li>
  <li>čaj</li>
  <li>mléko</li>
</ul>
Příklad — kružnice
<ul style="list-style-type:circle;">
  <li>káva</li>
  <li>čaj</li>
  <li>mléko</li>
</ul>
Příklad — čtereček
<ul style="list-style-type:square;">
  <li>káva</li>
  <li>čaj</li>
  <li>mléko</li>
</ul>
Příklad — nic
<ul style="list-style-type:none;">
  <li>káva</li>
  <li>čaj</li>
  <li>mléko</li>
</ul>

Výsledek zde

Vnořený seznam

<ul>
  <li>káva</li>
  <li>čaj
    <ul>
        <li>černý čaj</li>
        <li>zelený čaj</li>
    </ul>
  </li>
  <li>mléko</li>
</ul>

Vnořený seznam si zkuste ostylovat sami.

Horizontální seznam

Seznamy mohou být stylování různými způsoby.

Toto je velmi užitečný styl, kterým uděláme navigační menu (horizontální nabídku) na vrchu stránky:

<!DOCTYPE html>
<html lang="cs">
<head>
<meta name="author" content="Mgr. Ing. Jiří Chráska">
<meta charset="UTF-8">
<title>Navigační menu</title>

<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">Domů</a></li>
  <li><a href="#news">Novinky</a></li>
  <li><a href="#contact">Kontakty</a></li>
  <li><a href="#about">O webu</a></li>
</ul>

<h2>Nabídka nahoře</h2>
<p>V tomto příkladě je ukázáno, jak je možné vytvořit nabídku navrchu stránky (navigační menu) </p>

</body>
</html>

Trochu rozšířený výsledek je zde. Zjistěte, co je tam navíc oproti prezentovanému zdrojovému kódu.