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 do I get a link to ignore hover on mouseover?

    How can I make 2 elements share the same rollover state in CSS?

    CSS: How to add icon/image after input element

    How to mark up speedometer/gauge in HTML/CSS?

    How to create dynamic CSS class in in extjs or javascript

    how i can fit text to an image with css

    Boostrap 3: how to force the content of layout columns to be of same height?

    How to override a css !important property using jQuery with transitions

    How to apply IE Fixes for LESS CSS [closed]

    How to override background-color for all classes using css?

    How to use if else blocks to decide style in Razor?

    How to make Angular Forms ngModel classes inherit from Bootstrap Forms classes

    CSS to keep middle image in 100% width slideshow always in center

    css: how to make the third div line up with the first div

    How to avoid bootstrap from overriding id-called custom css?

    How to Make a materialize CSS button's width same as col s12?

    How to get rid of spaces between images in CSS?

    CSS: How to select elements by referencing the parent, not the child

    How to replace cycle('float: left', 'float: right') to use pure css?

    How to right align a flipswitch in jquery mobile 1.4.5

    User agent, how to have diferent css files for diferent devices automaticly

    How can I build a dynamic menu using CSS and JavaScript?

    How to put a canvas on an image?

    How can I set a html web page adapt to only a tablet size or large screen in css? [closed]

    how to properly use css in jsf?

    How to centering a form

    How Can I Make An Odd Shaped Icon into a “Circle”?

    How to avoid an unknown height sticky footer to overlap content with CSS only?

    How should I re-create this design in HTML and CSS?

    How to define text spacing in input in css