::before pseudo element creates text wrapping when using % margin compared to static margin

Question

So I'm having issues with a navigation bar. I want to separate each li with a "/" character and want the spacing to be based on the width of the window. When the margin of the ::before element ("/") was margin: 0 20px; the elements were all inline. However, when I change it to margin: 0 14.284%; the li content gets dropped below the slash.

How can I make everything in the li stay on one line and just be wider but still have that responsive spacing between elements.

I've provided a jsfiddle example at: http://jsfiddle.net/vDL9w/3/

EDIT: I guess the main question I have is why does a percent drop the other text and how can I make it fluid instead of just responsive?

Answer 1

what about using em unit instead of percentages

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

you can use ems to control the margins

EXAMPLE: http://jsfiddle.net/vDL9w/5/

just adjust the margin em value to your liking of space needed between li's.. (ie.. 1.2em or 0.9 .. etc..)

The em unit is equal to the computed value of the 'font-size' property of the element on which it is used.

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

:)