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