CSS Bară de navigare. Bară de navigare orizontală. Articole de listă inline. Articole de listă floating. Elementele li.

Bară de navigare orizontală

Există două moduri de a crea o bară de navigare orizontală. Utilizarea elementelor din linie interioară sau flotantă.

Articole de listă inline

O modalitate de a construi o bară de navigare orizontală este de a specifica elementele <li> ca inline, pe lângă codul „standard” de mai sus:

Exemplu:
 

li {
  display: inline;
}

Exemplu explicat:

display: inline; - În mod implicit, elementele <li> sunt elemente de tip block. Aici, eliminăm pauzele de linie înainte și după fiecare articol din listă, pentru a le afișa pe o singură linie.

Floating List Items

Un alt mod de a crea o bară de navigare orizontală este să float elementele <li> și să specifici un layout pentru link-urile de navigare:

Exemplu:

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

 
Exemplu explicat:

float: left; - Utilizați float-ul pentru ca elementele blocului să alunece unul lângă altul.
display: block; - Afișarea legăturilor ca elemente de tip block face ca întreaga zonă de legătură să poată fi făcută clickable (nu doar textul) și ne permite să specificăm padding-ul (și height, width, margins, etc., dacă doriți).
padding: 8px; - Deoarece elementele blocului ocupă toată lățimea disponibilă, ele nu pot pluti unul lângă celălalt. Prin urmare, specificați niște padding pentru a le face să arate bine.
background-color: #dddddd; - Adăugați o culoare de fundal gri la fiecare element.

Sfat: Adăugați background-color la <ul> în loc de fiecare element <a> dacă doriți un background-color cu lățime completă:

Exemplu:

ul {
  background-color: #dddddd;
}