4

如何制作一个两列堆叠列表,一个左对齐,一个右对齐的<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;
        }
    }
}
4

2 回答 2

2

如果您可以重新排列 html 元素group_agroup_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;
        }
    }
}

演示

于 2013-03-18T04:04:42.677 回答
1

或者您可以float: left;只设置 for.group_atext-align: right;for .group_b

CSS

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

工作示例

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

于 2013-03-18T08:19:49.537 回答