Позиционирование списков

[Mewow]

Привет всем, делал менюшку на сайте и столкнулся с одной проблемой
Есть тег div, в нем ul и 5 li в строчку с помощью inline-block

li должны быть равными по ширине и при том менять её в зависимости от ширины экрана

на ум пришла только эта идея:

Поскольку div = 100%  для li я поставил 20% и, как я понимаю, li должны вплотную занять всю ширину div и при том быть не статичными тк %

но не получается и последняя пятая переходит на новую строчку, когда ставлю 19% то всё влазит, но справа остаётся место и получается не красиво
в чем дело? Никаких отступов нет, padding 0, что еще занимает место? Или способ не правильный?

так же думал, что это из за пробелов между блоками,пробовал добавить float: left при этом пробелы между блоками убирались, но при 20% всё равно не влазиют

сейчас стоит на 19.453% и ,в принципе, все, на вид, вплотную, но это же совсем извращение  как мне кажется и мне всё же интересно почему мой первый вариант не работает

 

Edited February 17, 2018 by Mewow

[npofopr]

http://css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine.html

http://css-live.ru/articles/krasivoe-vyravnivanie-blokov-po-rezinovoj-setke.html

а лучше на flexbox

[Switch74]

1. используйте box-sizing, т.к. border не входит в width по умолчанию и у вас будет получаться 20%+2px минимум
2. если ваши кнопочки li имеют inline-block, то в коде вам их нужно писать без переносов и пробелов:
<li>...</li><li>...</li>
ли использовать комментарии
<li>...</li><!--
--><li>...</li>

[SelenIT]

3. Используйте display:flex для контейнера и забудьте извращения с убиранием пробелов и «клирфиксингом» флоатов как страшный сон*

* ну ладно, совсем не забывайте, оставьте как фолбэк для 2% совсем ископаемых IE:)