Доброго времени суток! У меня есть блок у которого ширина 100% а в нем список и всем элементам li (их 6 штук) я задал ширину в 16.6% но почему то последний li падает на низ, пять штук в ряд как положено а шестой с низу слева. Это при display: inline-block;, а когда задаю float: left; все работает отлично. Кто может сказать в чем проблема?
P.S. Ответы типа "А что тебя не устраивает в float?" не писать. Меня интересует ответ профессионала на почему это так.
Ответы есть ниже, а я очень хочу поделиться способом решать аналогичные проблемы самостоятельно. Если решение не очевидно после открытия консоли и наведения мышкой на соответствующие элементы.
Берете и закрашиваете фоном или задаете границы (в разных случаях по разному) для элементов. И смотрите кто "делает" лишние отступы.
Ответ профессионала: Загугли книжку "ИКФ - инлайновый контекст форматирования". Там абсолютно всё про инлайны. Книжка бесплатная, небольшая, распространяется в электронном виде. Первоисточник - css-live.ru
между inline элементами есть межсимвольный интервал. как между буквами в тексте например. нужно его удалить, либо учесть при расчете ширины элемента li
самое простое сделать так между всеми li:
Для inline-block. Проставь переносы строк и увидишь пробелы между элементами. 16,6% это не точно, не займет всю ширину, надо хотя бы 16,66666% прописать.
На флексах.
font-size: 0; для родительского контейнера - лучшее решение в данном случае (inline-block).
Комменты между блоками или отсутствие переноса слишком легко херится например при натягивании верстки.
Простой
