Geek Answers Handbook

A list of two columns with opposite alignments from the same UL?

How to make a two-column list, one left justified, one right justified from one <UL> element? Until now, I can get items to swim next to each other when I need them to stack as block-level items.

Desired layout (from PSD):

Desired layout

What I still have: Current layout HTML:

 <nav> <ul class="top_nav"> <li class="group_a"><a href="#">Hitched</a></li> <li class="group_a"><a href="#">Hatched</a></li> <li class="group_a"><a href="#">Hello</a></li> <li class="group_b"><a href="#">Our Story</a></li> <li class="group_b"><a href="#">Details</a></li> <li class="group_b"><a href="#">Readymade</a></li> </ul> </nav>



CSS (SCSS):

 header { padding-top: $row / 4; padding-left: $cols*2 - $gut; padding-right: $cols*2 - $gut; padding-bottom: $row / 3; .top_nav { .group_a { display: inline-block; float: left; } .group_b { display: inline-block; float: right; } } }
+4
source share
2 answers

Or you can set float: left; only for .group_a and text-align: right; for .group_b :

CSS

 .group_a { clear: both; float: left; } .group_b { text-align: right; }

working example

Thus, you do not need to change the order of li . Keep in mind that you may encounter some problems in IE7.

+1
source

If you can change the html elements so that group_a and group_b alternate, you can use clear to achieve this:

HTML

 <nav> <ul class="top_nav"> <li class="group_a"><a href="#">Hitched</a></li> <li class="group_b"><a href="#">Our Story</a></li> <li class="group_a"><a href="#">Hatched</a></li> <li class="group_b"><a href="#">Details</a></li> <li class="group_a"><a href="#">Hello</a></li> <li class="group_b"><a href="#">Readymade</a></li> </ul> </nav>

SCSS

 nav { padding-top: $row / 4; padding-left: $cols*2 - $gut; padding-right: $cols*2 - $gut; padding-bottom: $row / 3; .top_nav { .group_a { display: inline-block; float: left; clear: both; } .group_b { display: inline-block; float: right; } } }

Demo

+2
source

More articles:


All Articles