0

我设计了一个网站：http://newyorkfairandlovely.com/它是响应式的。但是当网站在计算机上打开时，导航栏的背景颜色不会显示在整个屏幕上。图像的全尺寸为 1950 像素宽。当屏幕缩小到 1024 像素或更小时，就可以了。这是css代码：

nav { position: absolute; left: 0; background-color: #9362ae; float: left; width: 100%; margin: 0 auto; max-width: 1950px; font-family: "Source Sans Pro", Helvetica, sans-serif; }

4

3 回答 3

1

这应该有助于：

body { margin : 0; padding : 0; }

正文与 HTML 有自己的间距。不同的浏览器有不同的设置，但大多数在<html>和的边缘之间有一些空间<body>，
通常使用body { margin : __; }

于 2013-09-20T02:33:05.880 回答
1

检查你的括号。您发布的规则嵌套在此之下：

@media 
only screen and (max-width: 1224px),
(min-device-width: 1024px) and (max-device-width: 1824px)  {
    /* your rule is here */
}

因此，一旦屏幕尺寸增加到大于 1224 像素，您的规则将不再适用。

这是一个为什么正确缩进代码是个好主意的例子。

于 2013-09-20T02:35:53.953 回答
0

其父元素的高度/宽度是多少？如果父母都是100％，我相信你可以让它覆盖整个屏幕。另外，尝试将 设置margin-right为 0。（我还注意到你float:left;的 css 中有一个，这可能是问题的一部分。

于 2013-09-20T02:33:40.163 回答