W jaki sposób tworzyć horyzontalny panel nawigacyjny ?

Question

Cześć, chcę napisać panel nawigacyjny w swoim projekcie i zastanawiam się, który sposób byłby lepszy.
Póki co pomysły są dwa - z użyciem div'ów i flexbox oraz klasycznie za pomocą <ul> i uporządkowanie tego float: left itd.
Czy jest jakaś różnica pomiędzy tymi dwoma sposobami, czy są to po prostu dwa dobre rozwiązania i od programisty już zależy czego wygodniej mu się używa ?

Comments

nie używaj float: left -> już mamy flexboxa i grida

Answer 1

Użyj flex i możesz uporządkować listę za pomocą ul,li. Bodajże flex-direction może być przydatne w celu wyświetlenia czegoś jako wiersz lub columna

Answer 2

Sugeruję użycie flexbox'a lub grid'a.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

float służy do opływania tekstu nie do tworzenia layoutów, używano go bo nie było alternatywy.

Powodzenia

Pozdrawiam

Comments

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 3

A co z:  display  

display: inline-block;

 

<nav label="element div:">
  <div><a href="#">link 1</a></div>
  <div><a href="#">link 2</a></div>
  <div><a href="#">link 3</a></div>
</nav>
<nav label="lista ul:">
  <ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
  </ul>
</nav>

<!--
  DIV-y bez display: inline-block
  nie trzeba nic ustawiać w css.
  DIV domyślnie (default) ma display: block
-->
<div>DIV 1</div>
<div>DIV 2</div>

nav {
  margin-bottom: 1em;
}
nav::before {
  content: attr(label);
}
nav div {
  display: inline-block;
  margin: 0.25em;
}


nav ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
  list-style-type: none;
  margin: 0.25em;
}