Как задать ширину в процентах?

Question

[Владимир]

Доброго времени суток! У меня есть блок у которого ширина 100% а в нем список и всем элементам li (их 6 штук) я задал ширину в 16.6% но почему то последний li падает на низ, пять штук в ряд как положено а шестой с низу слева. Это при display: inline-block;, а когда задаю float: left; все работает отлично. Кто может сказать в чем проблема?
P.S. Ответы типа "А что тебя не устраивает в float?" не писать. Меня интересует ответ профессионала на почему это так.

Comments

[Nikolay Talanov]

А погуглить про инлайн-блоки не судьба?

[Ankhena]

Ответы есть ниже, а я очень хочу поделиться способом решать аналогичные проблемы самостоятельно. Если решение не очевидно после открытия консоли и наведения мышкой на соответствующие элементы.
Берете и закрашиваете фоном или задаете границы (в разных случаях по разному) для элементов. И смотрите кто "делает" лишние отступы.

Answer 1

[Сергей delphinpro]

Ответ профессионала: Загугли книжку "ИКФ - инлайновый контекст форматирования". Там абсолютно всё про инлайны. Книжка бесплатная, небольшая, распространяется в электронном виде. Первоисточник - css-live.ru

Answer 2

[x404]

display: inline-block имеет межсимвольный интервал, обычно это 3 или 4 пикселя отступа справа. Поэтому он переносится на новую строчку.

Если не устраивает float, то можете сделать нечто такое: https://jsbin.com/mececegiti/1/edit?html,css,output
Костыль, ну а что сделать :)

Comments

[Вячеслав Лебедев]

А можно проще :) просто удалить переводы на новую строку

[x404]

Вячеслав Лебедев: Кому как) Мне проще в CSS написать было. Либо же через float.

Answer 3

[Андрей Федоров]

между inline элементами есть межсимвольный интервал. как между буквами в тексте например. нужно его удалить, либо учесть при расчете ширины элемента li
самое простое сделать так между всеми li:

<li>бла-бла-бла<!--
--><li>бла-бла-бла

Answer 4

[Вячеслав Лебедев]

Для inline-block. Проставь переносы строк и увидишь пробелы между элементами. 16,6% это не точно, не займет всю ширину, надо хотя бы 16,66666% прописать.
На флексах.

Answer 5

[Андрей Хохлов]

font-size: 0; для родительского контейнера - лучшее решение в данном случае (inline-block).
Комменты между блоками или отсутствие переноса слишком легко херится например при натягивании верстки.