垂直对齐/间距列表项

Question

Are you able to space a navigation list to have vertical spaces between certain <li> tags using CSS and not JavaScript & JQuery?

Example: http://jsfiddle.net/ssqnY/

It needs to be responsive with the height of the containing div or window height. The structure of the navigation list is below:

<ul>
    <li><a href="#">Link</a></li>
    <li class="spacer"></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="spacer"></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

Answer 1

Check this: http://jsfiddle.net/ssqnY/1/

li.spacer {
  margin: 0 0 30% 0;
}

Works for responsive too.

Answer 2

You can set vertical spacing to certain li 's using CSS this way: Set your desired li with a spacer class and then:

li.spacer {
  margin: 15% 0;
}

You can too, set the first li to have a space:

li:first {
  margin: 15% 0;
}

Or all the li 's to have space:

li {
  margin: 15% 0;
}

Ps: the 15% value is just an example, you can set what you want to it, you can use maybe a percentage, to become more responsive like 10px .