html - 移动版菜单项顺序( float 问题)

Question

当我的菜单转到汉堡菜单项时，获取 display:block 值。但是由于最后 3 个元素的 float:right 属性，我的元素没有得到正确的顺序。

我受困于想法，我可以制作 2 个菜单，但我认为那不是正确的方法。

codepen preview here

Answer 1

如果您想要不同的顺序而不创建两个菜单，请查看使用 flexbox 和顺序属性:https://www.w3schools.com/cssref/css3_pr_order.asp

在移动 View 中，类似以下内容:

header ul {
    display: flex;
    flex-direction: column;
}

header ul li:nth-child(5) {
    order: 7;
}

header ul li:nth-child(6) {
    order: 6;
}