Вирівнювання пунктів меню по ширині сторінки

Розглянемо одну корисну фічу - вирівнювання пунктів меню по ширині

Вперед!
Флексбокс вирівнювання
Вирівнювання за допомогою флексбоксів

Маленький але корисний хак

Невеликий воркхак на рахунок рівномірно розподілених пунктів меню на всю ширину навігаційної панелі, як ось вприкладах 4 і 5. Не раз стикався з таким завданням в останніх прикладах.

Щоб реалізувати все вдало треба пам'ятати одну маленьку особливість text-align:justify, а саме те, що такий тип вирівнювання НЕ ПРАЦЮЄ на незаповнені на 100% строки. Якщо ми маємо декілька пунктів меню, то строка буде незаповненою і вирівнювання буде по замовчуванню по лівому краю. Тому тут є певних воркхак: створити псевдоелемент після меню з пустим контентом, відображати його як інлайн-блок а також задати ширину 100% і висоту 0. Глянемо як це буде в коді, а також на прикладі. Доречі, ось стаття з хабру, де описані різні види горизонтальних меню і їх реалізації

Те що зображено на картинці вище — не відноситься до нашого коду, а служить лише ілюстрацією бажаного результату

Ось такий нехитрий хтмл (без холіваров про меню з використанням списку або без, принцип той самий):

    
<nav class="gradient_bg">
 <a href="#">About Us</a>
 <a href="#">Services</a>
 <a href="#">Products</a>
 <a href="#">Solutions</a>
</nav>        
    
Приклад розмітки

А ось основні моменти в цсс, я спеціально не вписував сюди деталі, як-то шрифти, колір і тд, все це є в прикладі на джиесфідл, нижче

    
nav{
 width: 100%;
 text-align: justify;
 line-height: 0; /*зроблено для того, щоб пуста строка не впливала на висоту блоку меню*/
}
 nav:after{
  content: '';
  width: 100%;
  height: 0;
  display: inline-block;
 }
 nav a{
  display: inline-block;  
 }        
    
Стилі

Ось так виглядатиме наше меню, доречі схоже є в третьому завданні з дівхаку)

Результат
Меню вирівняне по ширині

Ну от така нехитра штука, але багато де виручає, в основу покладений хак для роботи з вирівнюванням по ширині при неповністю заповнених строках.


Поділитись в соцмережах

Сподобався пост? — розкажіть про нього своїм друзям