Горизонтальное меню на списке

Question

[Станислав Еременко]

Делаю горизонтальное меню с разделителями. Разделители обычный слэш "/"
Решил использовать псевдоэлементы для вставки разделителей.

Контейнер имеет float и его размеры не известны (резиновый). Естественно расстояние между элементами списка должно "тянуться".
По сему решил сделать margin у псевдоэлементов с процентным значением.

В итоге наблюдаю, что последний элемент списка переносится из-за недостатка ширины контейнера. Причем видно, что ширина контейнера равна ширине блока без margin у псевдоэлемента.
Замечу, что при "ручном" изменении ширины контейнера проблема пропадает.

Как это пофиксить?

Код с примером в песочнице: http://dabblet.com/gist/7614971

Answer 1

[Eugene Mosyukov]

1. Тянулось бы довольно странно. Вы задаете margin, который высчитывает расстояние относительно ширины .container. Получается, чем больше элементов в списке, тем больше между ними расстояние.

2. Так как в качестве размера отступов используются проценты, то для начала браузер высчитывает размер блока .container. После того, как становится известна ширина контейнера, браузер может высчитать проценты от контейнера и применить их в качестве отступов для .sep:after, и разумеется, такой блок уже не помещается, так как при первоначальном просчете не учитывался отступ.

В данной ситуации, как «грязное» решение, можно задать для ul — width: 109%. Тем самым мы компенсируем то, что ширины контейнера недостаточно. Либо задайте для ul — white-space: nowrap. Но это плохие решение. Попробуйте подобрать решение, где вам подойдет фиксированная ширина контейнера.

Answer 2

[theal]

* {box-sizing:border-box;}
* - поставишь там где необходимо(ul,li) + незабудь про префиксы

Comments

[Eugene Mosyukov]

В данной ситуации box-sizing не поможет.

Answer 3

[Иван Беленков]

Так пойдёт?

Comments

[Eugene Mosyukov]

Как я выше говорил — это грязное решение. Таким образом ширина .container меньше ширины ul. А значит, в зависимости от макета, меню на что-нибудь наползет.