CSS Bară de navigare. Bară de navigare orizontală. Articole de listă inline. Articole de listă floating. Elementele li.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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;
}