Псевдоэлемент::before создает перенос текста при использовании% margin по сравнению со статическим margin

Question

У меня проблемы с панелью навигации. Я хочу отделить каждый li с помощью символа "/" и хочу, чтобы интервал основывался на ширине окна. Когда поле элемента::before ("/") было margin: 0 20px; все элементы были встроены. Однако, когда я изменяю его на margin: 0 14.284%; содержимое li падает ниже косой черты.

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

Я предоставил пример jsfiddle по адресу: http://jsfiddle.net/vDL9w/3/

РЕДАКТИРОВАТЬ: я думаю, главный вопрос, который у меня есть, почему процент падает другой текст и как я могу сделать его текучим, а не просто реагировать?

Answer 1

Как насчет использования блока вместо процентов

.nav-menu > li::before {
        content: "/";
        display: inline-block;
        margin: 0 1em; /* using ems */
}

Вы можете использовать EMS для контроля полей

ПРИМЕР: http://jsfiddle.net/vDL9w/5/

просто настройте значение margin em по своему вкусу в пространстве, необходимом между li's.. (т.е... 1.2em или 0.9 .. etc..)

Единица em равна вычисленному значению свойства 'font-size' элемента, в котором оно используется.

http://dev.w3.org/csswg/css3-values/

:)