css - 与单个 UL 具有相反对齐方式的两列列表？

Question

如何制作一个两列堆叠列表，一列左对齐，一列右对齐 <UL>元素？到目前为止，当我需要元素像 block 级元素一样堆叠时，我只能让元素彼此相邻 float 。

所需布局(来自 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

如果您可以重新排列 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