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

Question

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

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

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

EDIT: Я думаю, главный вопрос у меня есть, почему делает процентное падение другой текст, и как я могу сделать это жидкость, а не просто реагировать?

Answer 1

что об использовании эм единицы вместо процентов

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

вы можете использовать Эмс, чтобы контролировать поля

Пример:http://jsfiddle.net/vDL9w/5/

просто настроить Маржа эм значения по вашему желанию пространства, необходимого между li .. (т.е. .. 1.2em или 0.9 .. и т.д ..)

ет единица равна вычисленному значению свойства «размер шрифта» элемента, на котором она используется.

http://dev.w3.org/csswg/css3-values/#em-unit

:)