Список из двух столбцов с противоположными выравниваниями от одного UL?

Question

Как сделать двухстоечный уложенный список, один выровненный по левому краю, один выровненный по правому краю из одного элемента <UL>? До сих пор я могу получать элементы, чтобы плавать рядом друг с другом, когда мне нужно, чтобы они складывались подобно элементам уровня блока.

Желаемая макет (из PSD):

То, что я до сих пор: 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; 
     } 
    } 
} 

Answer 1

Или вы можете установить float: left; только для .group_a и text-align: right; для .group_b:

CSS

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

working example

Таким образом, вам не нужно изменять свой заказ li. Имейте в виду, что некоторые проблемы могут возникнуть в IE7.

Answer 2

Если вы можете изменить HTML-элементы так group_a и group_b чередуются, то вы можете использовать clear для достижения этой цели:

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