How to stretch menu items across the entire width of the parent block?

Question

There is the usual navigation :

HTML:

<nav> <ul> <li><a href="">Продукция</a></li> <li><a href="">Сообщества</a></li> <li><a href="">Мероприятия и акции</a></li> <li><a href="">Поддержка</a></li> </ul> </nav>

CSS:

 nav { font-size: 0; line-height: 0; letter-spacing: -1px; } nav li { display: inline-block; } nav a { display: block; background: #000; padding: 0 10px; font-size: 17px; line-height: normal; letter-spacing: normal; color: #fff; } nav li:nth-child(2n) a { background: #666; }

How do menu items stretch across the entire width of the nav block so that the padding of all links is the same (there should not be empty space between the links, is this space allocated to the internal indents of the links)?

UPD:

An image of how the menu should be displayed.

Sasha Omelchenko Sasha Omelchenko 10.9k four 20 52 · Accepted Answer · 2017-02-27T10:41:13

Put display: flex parent, flex-basis: auto + flex-grow: 1 - to descendants.

 body, ul { margin: 0; padding: 0; } ul { display: flex; } ul li { list-style-type: none; flex-basis: auto; flex-grow: 1; background: #000; text-align: center; } ul li:nth-child(2n) { background: #ccc; } ul li a { padding: 20px 0; text-decoration: none; color: #ccc; display: block; } ul li:nth-child(2n) a { color: #000; }

 <nav> <ul> <li><a href="">Продукция</a></li> <li><a href="">Сообщества</a></li> <li><a href="">Мероприятия и акции</a></li> <li><a href="">Поддержка</a></li> </ul> </nav>

Alexey Giryayev Alexey Giryayev 3,759 6 34 · Answer 2 · 2017-02-27T08:30:08

Option on Flexbox

 body, ul { margin: 0; padding: 0; } ul, ul li, ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } ul { text-align: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } ul li a { min-height: 70px; text-decoration: none; color: #333; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } ul li a:hover { background: #eee; }

 <nav> <ul> <li><a href="">Продукция</a></li> <li><a href="">Сообщества</a></li> <li><a href="">Мероприятия и акции</a></li> <li><a href="">Поддержка</a></li> </ul> </nav>

The same option as above :-) The internal indents of the links are different.
The width of the list items is the same, the menu itself is stretched wide.

How to stretch menu items across the entire width of the parent block?

2 answers 2

More articles: