css - 同一容器中的顶部和底部 v 对齐

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

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

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

谢谢，

沙鲁克