来自单个 UL 的具有相反对齐方式的两列列表？答案

【问题标题】：Two-column list with opposite alignments from single UL?来自单个 UL 的具有相反对齐方式的两列列表？
【发布时间】：2013-03-18 16:19:49
【问题描述】：

如何从一个<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;
        }
    }
}

【问题讨论】：

到目前为止，你有什么问题？
浮动元素彼此相邻显示，它们应该堆叠在所需的布局图像中。
哦，我明白你在说什么。你能做个小提琴给我们玩吗？
你必须坚持使用这个 HTML 吗？因为 3dgoo 有一个很好的解决方案，如果你可以改变 HTML

标签： css layout alignment

【解决方案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

【讨论】：

一个公平的解决方案，假设我可以弄清楚如何在 javascript 中错开它们。

【解决方案2】：

或者您可以将float: left; 设置为仅用于.group_a 和text-align: right; 用于.group_b：

CSS

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

working example

这样您就不必更改您的li 订单。请记住，您可能会在 lte IE7 中遇到一些问题。

【讨论】：