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

Question

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

0

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

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

Я привел пример jsfiddle: http://jsfiddle.net/vDL9w/3/

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

The.Professor 02 дек. 2013, в 16:40

Источник

Теги:

html

css3

responsive-design

pseudo-element

fluid-layout

1 ответ

Ещё вопросы

Jonathan Marzullo · Answer 1 · 2013-12-02T13-37-00.000Z

как об использовании em unit вместо процентов

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

вы можете использовать ems для управления полями

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

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

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

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

:)

Я надеялся, что он будет более плавным с изменением размеров окна. в противном случае это будут медиазапросы размером с фиксированными значениями em. Я также больше не уверен, почему текст опускается ниже косой черты, когда поле имеет такой же эквивалентный размер пикселя.
если вы используете медиа-запросы, то просто установите правило css для медиа-запросов для размера шрифта в элементе LI ... поскольку ems получают свое значение на основе размера шрифта элемента. .. или размер шрифта для ваших элементов LI остается неизменным при изменении размера окна?
Я мог бы использовать кучу медиазапросов, но я стараюсь сделать так, чтобы это был самый большой, медиазапрос, чтобы удалить «/», и медиазапрос, чтобы сделать его выпадающим меню на мобильных устройствах. Я предполагаю, что главный вопрос, который у меня есть, - почему процент отбрасывает другой текст и как я могу сделать его плавным, а не отзывчивым. я отредактирую свой вопрос