0

我正在创建一个带有背景的导航菜单。请参阅网站http://lolraffle.com

我有以下 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>

这个 CSS 使导航准确地悬停在菜单背景上。

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

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

我试图将像素转换为百分比，但它仍然无法正常工作

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

它仍然无法正常工作。

有没有一种快速简便的方法可以将我的导航菜单粘贴在那个地方，并在屏幕调整大小时将其保留在那里？

先感谢您！

4

2 回答 2

0

你做错了！

  1. 将图像作为背景图像而不是实际<img>标签。
  2. 不要使用位置：绝对，而是将导航向右浮动。
于 2013-10-20T14:47:49.773 回答
0

ViewPort 元标记的使用

将视口的元标记用作

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

百分比值的使用

然后，如果您使用百分比，您将获得所需的结果。例如当你使用这个 css

body {
  width: 100%;
  height: 100%;
}

浏览器会根据当前的屏幕尺寸自动更改元素的宽度和高度！

CSS3 媒体查询

第三件事是使用CSS3 Media Query，如何？

您可以检查当前的屏幕尺寸，然后更改 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代替margin-topand margin-left。

像这样：

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

使用浮动而不是边距

一个简单的方法是让它向右浮动，如：

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

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

参考：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

于 2013-10-20T14:51:41.797 回答