Elementy poziomego menu CSS wyświetlone obok siebie

W tej części kursu CSS poznamy jeden z najczęstszych sposobów na sprawienie, aby kilka blokowych elementów HTML wyświetliło się obok siebie. Jednak zanim to nastąpi rozwiążemy jeden z problemów jaki został przedstawiony w dziale drugim, gdy budowaliśmy pionowe menu CSS. Problem polegał na tym, że elementy a są elementami wyświetlonymi w linii, a więc nie zajmują całego obszaru swojego elementu rodzica, który jest elementem blokowym, w tym wypadku elementem li.

Problem ten przeszkadza nam, gdy chcemy kliknąć w dany element a naszego menu, ponieważ musimy uczynić to dokładnie na zawartości danego elementu a. Dla ułatwienia przedstawienia naszego problemu elementów a zostało do nich dodane przykładowe obramowanie (border:1px solid #000;) oraz różna ilość zawartości, w tym wypadku tekstu.

ul > li > a {
  text-decoration:none;
  color:#000;
  border:1px solid #000;
}

Rezultat:

Nasz problem możemy w dosyć łatwy sposób wyeliminować, wystarczy sprawić, aby elementy a stały się również elementami blokowymi, dzięki czemu zajmą cały obszar szerokości swojego elementu rodzica, czyli w tym wypadku elementu li. Za sprawienie, aby element HTML stał się elementem blokowym odpowiada właściwość display wraz z wartością block.

ul > li > a {
  display:block;
  text-decoration:none;
  color:#000;
  border:1px solid #000;
}

Rezultat:

Pomocnicze obramowanie (border:1px solid #000;) z elementów a możemy usunąć, ponieważ na razie nie przyda się nam.

Naszym celem podczas tej części kursu jest wyświetlenie blokowych elementów HTML obok siebie, w naszym wypadku tymi elementami są elementy li naszego menu CSS. Elementy blokowe HTML ułożą się obok siebie, gdy dodamy do nich właściwość float wraz z wartością left, jednak zanim to nastąpi dodamy pomocniczy tekst do elementu ul, aby wkrótce zauważyć pewną rzecz (przy okazji widzimy granicę naszego elementu ul, która jest zaznaczona przez pomocnicze czerwone tło).

<ul>
  <li><a href="#">link pierwszy</a></li>
  <li><a href="#">link drugi</a></li>
  <li><a href="#">link trzeci</a></li>
  to jest dodatkowa zawartość elementu - ul, którą w rzeczywistości nie należy tu umieszczać
</ul>

Rezultat:

Gdy dodamy właściwość float wraz z wartością left do blokowych elementów HTML to zostaną one rozpoznane przez przeglądarkę internetową jako elementy HTML, które mają unosić się w lewą stronę, do lewej krawędzi swojego elementu rodzica. Rozmiar takich elementów, ich szerokość oraz wysokość, jest uzależniona od zawartości jaka zostanie w nich umieszczona. Wspomniane elementy unoszące się będą przylegać jeden do drugiego w poziomie, gdy ich szerokość (uzależniona od ich zawartości) na to pozwoli, oraz gdy szerokość ich elementu rodzica (w naszym wypadku elementu ul) na to pozwoli (czyli nie będzie mniejsza niż suma szerokości wszystkich elementów unoszących się, czyli w naszym wypadku elementów li).

ul > li {
  float:left;
}

Rezultat:

Od tej pory wszystkie elementy li, w naszym przykładzie, układają się jeden obok drugiego, ponieważ stały się one elementami unoszącymi się w lewą stronę, bo została do nich dodana właściwość float wraz z wartością left. Elementy li unoszą się nad obszarem swojego elementu rodzica, czyli elementu ul (obszar z czerwonym tłem), jednak nie wpływają one na rozmiar jego wysokości, co możemy zaobserwować, gdy usuniemy dodatkowy tekst z elementu ul (element ul będzie miał zerową wysokość).

Aby sprawdzić czy nasza teoria o zerowej wysokości elementu ul jest prawdziwa możemy dodać do elementu ul przykładowe obramowanie (border:1px solid #000;).

ul {
  margin:0;
  padding:0;
  list-style-type:none;
  border:1px solid #000;
}

Rezultat:

Od tej pory element ul posiada przykładowe obramowanie (border:1px solid #000;). Wspomniany element ul posiada zerową wysokość, przez to, że jego zawartością są tylko elementy unoszące się (elementy li wraz z właściwością float:left;), dlatego widzimy tylko jego obramowanie (czerwone tło pozostaje niewidoczne przez brak zawartości, która wpływałaby na wysokość elementu ul).

Kod HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* wygląd elementu - ul */
      ul {
        margin:0;
        padding:0;
        list-style-type:none;
        border:1px solid #000;
      }

      /* wygląd elementów - li */
      ul > li {
        float:left;
      }

      /* wygląd nieparzystych elementów - li elementu - ul */
      ul > li:nth-child(odd) {
        background-color:gold;
      }

      /* wygląd parzystych elementów - li elementu - ul */
      ul > li:nth-child(even) {
        background-color:lightblue;
      }

      /* wygląd elementów - a */
      ul > li > a {
        display:block;
        text-decoration:none;
        color:#000;
      }
    </style>
  </head>

  <body>

    <ul>
      <li><a href="#">link - 1</a></li>
      <li><a href="#">link - 2</a></li>
      <li><a href="#">link - 3</a></li>
    </ul>

  </body>
</html>

Cel tej części kursu CSS został osiągnięty. Sprawiliśmy, aby blokowe elementy li naszego menu CSS zostały ustawione w poziomie jeden obok drugiego. Wykorzystaliśmy do tego celu jeden z najczęstszych sposobów na sprawienie, aby kilka blokowych elementów HTML zostało wyświetlonych jeden obok drugiego w poziomie. Użyliśmy do tego celu właściwość float wraz z wartością left, dzięki czemu sprawiliśmy, aby blokowe elementy li stały się unoszącymi się elementami HTML, jednak tego typu elementy HTML sprawiają pewne kłopoty oraz niedogodności. Jedną z nich jest problem wysokości ich elementu rodzica.

Więcej o unoszących się elementach HTML oraz o właściwości float mogliśmy dowiedzieć się z działu pierwszego - Unoszący się element HTML.

W następnej części kursu CSS poznamy więcej problemów unoszących się elementów HTML oraz zajmiemy się ich rozwiązywaniem.