Css 两列列表，与单个UL相反对齐？

如何在一个

元素中创建一个两列堆叠列表，一个左对齐，一个右对齐？到目前为止，当我需要元素像块级元素那样堆叠时，我只能让元素彼此相邻浮动

所需布局（来自PSD）：

<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>

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;
        }
    }
}

到目前为止我拥有的： 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>

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;
        }
    }
}

---

如果可以重新排列html元素，使

组a

和

组b

交替，则可以使用

清除

来实现此目的：

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>

---

或者您可以设置

浮动：左

仅适用于

。组a

和

文本对齐：右对于
。组b
：

CSS

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


这样，您就不必更改
li
订单。请记住，您可能会在lte IE7中遇到一些问题。
到目前为止，您所拥有的有什么问题吗？浮动元素显示在彼此旁边，它们应该按所需布局图像所示堆叠在一起。哦，我明白您的意思了。你能做一把小提琴给我们玩吗？你必须坚持使用这个HTML吗？因为3dgoo有一个很好的解决方案，如果你能改变HTMLA的公平解决方案，假设我能想出如何在javascript中错开它们。