Html 使用屏幕调整大小更改Div边距

我正在创建一个带有背景的导航菜单。 查看网站

我有下面的HTML

<nav id="menu">
            <ul>
                <li><a href="#" id="home">HOME</a></li>
                <li><a href="#" id="faq">FAQ</a></li>
                <li><a href="#" id="contact">CONTACT US</a></li>
            </ul>
        </nav>

现在的问题是，当我调整屏幕大小时，菜单不会沿着页面移动，因为它是以像素为单位定义的

我试图将像素转换成百分比，但仍然无法工作

nav#menu {
  position: absolute;
  margin-top: -5%;
  margin-left: 51.3%;
}

它仍然不起作用

是否有一种快速简便的方法将我的导航菜单粘贴到该位置，并在屏幕调整大小时将其保留在那里

---

提前谢谢你

你做错了

将图像作为背景图像，而不是实际的

标记

不要使用position:absolute，只需将导航向右浮动即可

视口元标记的使用 将视口的元标记用作

<meta name="viewport" content="width=device-width" />

浏览器将根据当前屏幕大小自动更改元素的宽度和高度

CSS3媒体查询 第三件事是使用CSS3媒体查询，如何使用

您可以检查当前屏幕大小，然后更改CSS属性。例如：

@media (max-width: 900px) {
  /* here you will write the properties which will be visible 
   * on the devices which have max width of 900px
   */
}

然后，当您设置边距时，您将在那里看到更改

更改边距 另一种方法是使用

top

left

，而不是

margintop

和

marginleft

像这样：

nav#menu {
  position: absolute;
  top: -67px;
  left: 678px;
}

使用浮动代替边距 一种简单的方法是使其向右浮动，如下所示：

nav#menu {
  position: absolute;
  float: right;
}

这样，您将获得右侧的导航。你也不必担心利润

参考：

---

我知道使用标签是一种奇怪的解决方案，但是菜单包装背景的大小没有正确调整。这是因为你正在浮动所有的

li

，在

ul

上放置

overflow:hidden

，你应该很好。我建议您在继续之前学习一些css基础知识

nav#menu {
  position: absolute;
  top: -67px;
  left: 678px;
}

nav#menu {
  position: absolute;
  float: right;
}