How to remove margin on horizontal list line break? - css

Question

I have a top navigation bar which I want to be always visible even when the screen is only 320px wide. Here is what I have done:
<nav>
<ul>
<li>Products</li>
<li>Services</li>
<li>Videos</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
I display the list horizontally using this CSS:
nav li { float: left; }
nav li + li { margin-left: 30px; }
I end up with this:
Products Services Videos News Contact
This is fine until the screen becomes small and the final two list items get pushed down to the next row like this:
Products Services Videos
News Contact
I need to remove the left margin of the first item that is on a new row like this:
Products Services Videos
News Contact
How could this be achieved? I don't mind changing my HTML and CSS completely to achieve it - as long as it can be done!

Answer 1

Swap it and use margin-right instead
nav li { float: left; }
nav li:not(:last-child) { margin-right: 30px; }
nav { width: 250px; } /* just to show the effect of a line break */
<nav>
<ul>
<li>Products</li>
<li>Services</li>
<li>Videos</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
Another option, which can become useful, is adding equal margin on both sides of each item.
Then, if the layout allows it, one can give the parent an equal negative margin, or just leave it, and you'll end up with the same result, all left aligned when line breaks
nav li { float: left }
nav li { margin: 0 15px }
nav ~ nav { margin-left: -15px }
nav { width: 250px; } /* just to show the effect of a line break */
<nav>
<ul>
<li>Products</li>
<li>Services</li>
<li>Videos</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
<br><br><br>
<nav>
<ul>
<li>Products</li>
<li>Services</li>
<li>Videos</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>

Answer 2

You could simply apply a right margin instead of left margin. That way when items are broken into a new line, there will not be a space before them:
nav li { float: left; margin-right: 30px; }
<nav>
<ul>
<li>Products</li>
<li>Services</li>
<li>Videos</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
jsfiddle: https://jsfiddle.net/azizn/v1f9hL04/