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

Question

我有以下HTML＆amp; 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;
}

我正在尝试将三个第一个链接放在顶部，最后三个链接位于“menus”容器的底部，如下所示：

在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

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

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

谢谢，

Shah Rukh

Answer 2

我得到了它：

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: ...
}