移动版页面菜单图标定位问题

Question

我想要并且正在尝试将图标菜单定位到她的右边缘，以等于底部图像的右边缘。 我不知道为什么，但这个图标不会移动：P。怎么了？我该如何解决这个问题？我在这里添加它的样子： 在此输入图片描述

我尝试在图标导航类上添加 margin-left: auto ，在容器上显示 flex 。然后任一弯曲都会在一个孩子身上生长，因此它会占用尽可能多的空间。我尝试添加 justify-content: space- Between 。但这些方法都行不通。如果它不起作用，则代码结构一定有问题（html 或其他地方的 css 属性覆盖了它），但我找不到问题所在。 这是我的 github：https://github.com/NatKacz99/news-homepage。 这是实时页面：https://natkacz99.github.io/news-homepage/

Answer 1

你的导航CSS没有任何问题。在您定义的屏幕宽度（即

375px

）上，菜单图标设置在导航栏的右侧。虽然问题在于你的

.container

类。您为其设置了一些填充，这使得容器的总宽度超过了视口的实际宽度。结果是

horizontal scroll

。由于这种滚动，您无法想象您的

nav

菜单图标实际上位于正确的位置。

您可以按如下方式修改

style.css

中的CSS，然后就可以开始了。

@media(max-width: 375px) {
/*
* Existing code
*/
.container {
    /*Existing styling*/
    padding-inline: 0px;
}

PS 你应该得到如下输出：