How to remove margin on horizontal list line break?


Tags: css,responsive-design,responsive

Problem :

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!



Solution :

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>

css menu margin

jsfiddle: https://jsfiddle.net/azizn/v1f9hL04/


    CSS Howto..

    How to edit 'clip' CSS property in JQuery?

    How to set two values for one css property?

    How to place an image properly with CSS

    how to get double border in using CSS?

    How do I hide the div if the Var is empty?

    How to apply multiple css transform properties using Jquery

    How to style sets of labels and fields in a form with pure CSS and get proper alignment?

    How to calculate sine, cosine in Less?

    How to scale background image proportionally which is in css background of a div?

    How to select two elements with “> span” in CSS?

    How to incrementally increase the value of a css property every click?

    SCSS/SASS how apply style for all pseudo selectors

    How do I change the MVC Bootstrap layout to have more than one columns

    How to chose which CSS rule to use from multiple style sheets

    how to center two div in xs

    How to count the number of correct answers using Javascript?

    Parallax image shows at top of page on load

    how to select a input using jquery

    How to avoid orphaned headings in CSS columns?

    How to add image after button/div css?

    How to make the background image to fit into the whole page without repeating using plain css?

    How to create some elegant shadows in CSS [closed]

    How to change the style of an active menu with php + css

    How to apply background color (or custom css class) to column in grid - ExtJs 4?

    Do I need to use float:clear to have content show where I want it to show?

    How to strike through obliquely with css showing the text on top of the strike through

    Drag and drop in AngularJS: make a directive that is a drop zone, showing an overlay when dragging

    How do I trigger successive CSS transforms with transitions using jQuery's .css()?

    How to style a list of links with CSS?

    How to free a paragraph from its CSS style?