css - 顶部和底部 v-align 在同一个容器中

Question

我有以下 HTML & CSS

<div class="menus">
    <a href="#">A</a>
    <a href="#">B</a>
    <a href="#">C</a>
    <a href="#">D</a>
    <a href="#">E</a>
    <a href="#">F</a>
</div>

.menus a
{
    height: 2em;
    display: inline;
    float: left;
    width: 4em;
    margin: 0.3em;
}

我试图将前三个链接放在顶部，最后三个放在“菜单”容器的底部，如下所示：

按照HTML 的答案： Top and Bottom v-align in same container，我尝试将前三个和后三个放入自己的容器中，但随后它们失去了宽度

header .menus .firstThree
{
    position: absolute;
    top: 0;
}

header .menus .lastThree
{
    position: absolute;
    bottom: 0;
}

我什至尝试过使用:nth-child，但是它们都堆叠在一起:(

header .menus a:nth-child(1),
header .menus a:nth-child(2),
header .menus a:nth-child(3)
{
    position: absolute;
    top: 0;
}

我需要一个绝对垂直位置之类的东西，但需要一个相对水平位置.. :)

Answer 1

我得到了它的工作：

header .menus a:nth-child(1),
header .menus a:nth-child(2),
header .menus a:nth-child(3)
{
    position: absolute;
    top: 0;
}

header .menus a:nth-child(2)
{
    margin-left: ...
}

header .menus a:nth-child(3)
{
    margin-left: ...
}

header .menus a:nth-child(4),
header .menus a:nth-child(5),
header .menus a:nth-child(6)
{
    position: absolute;
    bottom: 0;
}

header .menus a:nth-child(5)
{
    margin-left: ...
}

header .menus a:nth-child(6)
{
    margin-left: ...
}

Answer 2

使用菜单 div 中的 ul 和 li 元素，然后使用 css 设置 div 的高度和宽度，然后使用相对于 li 的位置。

请记住，如果您使用绝对位置，那么您将为每个元素设置样式。

谢谢，

沙鲁克