Почему переносится последний inline-block, хотя достаточно места, чтобы он не переносился?

Question

[sanns]

Есть код: codepen.io/sanns/pen/WQjRoj?editors=110)
Пытался сделать само меню справа ,а элементы, чтоб переносились по левому краю. Так и сделал, но почему-то переносится последний элемент, хотя для него достаточно места на больших разрешениях. Скажите , пожалуйста, в чем тут дело? Спасибо!

Answer 1

[sanns]

подсказали на stackoverflow не ставить марджины в процентах
codepen.io/sanns/pen/WQjRmM?editors=110

Answer 2

[Дмитрий Новиков]

сделайте так:

.navg {
    display: block;
    text-align: right;
}

Comments

[sanns]

тогда сам .navg не будет по правому краю :)

Answer 3

[Саша]

Каждый браузер по умолчанию добавляет у инлайн-блочных элементов отступ, размер этого отступа разный, в зависимости от браузера.
Чтобы этого избежать, на одной горизонтальной оставляют закрывающий и открывающий тег элемента который застилен как инлайн-блочный (без пробела).

<div class="inline-block-elem">
	text
</div><div class="inline-block-elem">
	text
</div>

Comments

[Mr Crabbz]

Ничего там не разный отступ. Просто между закрывающим и закрывающим дивом браузер засчитывает пробел (перенос строки тоже считается за пробел). Соответственно этот пробел имеет размер, равный ширине пробела в вашем размере шрифта.
В приведенном вами примере вы просто убрали пробел. Это проще, но сам код тогда становится трудно читаемым.
Решение простое:
Родителю этих двух блоков задаём font-size:0 - пробел пропадет. Далее самим дивам нужно заново определить размер шрифта (ибо по-умолчанию у них тоже станет font-size:0).

[Саша]

Роман Краббз: возможно, вы во всех актуальных браузерах тестировали?

[Lynn «Кофеман»]

Саша: OMFG. Это определение inline-block. Почитайте документацию.

[Саша]

Алексей Тен: Окей, спасибо.

[Lynn «Кофеман»]

Саша: если совсем просто, то inline-block элемент ведёт себя как буква. Если между двумя буквами поставить пробел, то он никуда не денется.

[Саша]

Алексей Тен: перенос строки в данном случае играет роль пробела.

[Lynn «Кофеман»]

Саша: ну это уже вообще азбука html

[Саша]

Алексей Тен: ))

Answer 4

[Алекс К]

Уберите стили у .navg и все заработает. Вот:
codepen.io/anon/pen/vNmgQG

Comments

[sanns]

дело в том , что тогда при сужении экрана, элементы тоже будут по правому краю складываться

Answer 5

[Александр Гамов]

Странно, начал форматировать Ваш html и блок выровнялся так как нужно, такое ощущение, что стоят непереносимые пробелы (хотя в редакторе их должно было быть видно)