CODEWITHSUNDEEP
jqueryhtmlcss
Alan Gardner
Alan Gardner

Reputation: 43

Vertically aligning/spacing list items

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>

Upvotes: 1

Views: 105

Answers (2)

Ani
Ani

Reputation: 4523

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

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

Works for responsive too.

Upvotes: 1

Paulo Roberto Rosa
Paulo Roberto Rosa

Reputation: 3295

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.

Upvotes: 0

Related Questions