Question

如何制作一个双列堆叠列表，一个左对齐，一个右对齐一个<UL>元素？到目前为止，当我需要它们像块级元素一样堆叠时，我只能让元素浮动到彼此旁边。

所需的布局（来自PSD）：

Desired layout

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

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

Answer 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订单了。请记住，您可能会在IE IE中遇到一些问题。

单列UL具有相反对齐的双列列表？

2 个答案: