Question

好的，所以我正在尝试制作一个顶级固定菜单，我有这个CSS：

#top {
    background-color: #fff;
    padding: 0;
    border-bottom: 1px solid #333;
    border-top: 1px solid #333;
    box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
    position: fixed;
    width: 100%;
    z-index: 15;
    top: 0;
    }

正如你所看到的，我有宽度：100％但是在加载页面时，顶部div有点向右弯曲，而不是完全宽度。我截取了here截图。我在Opera 11和Google Chrome中测试过。

我做错了什么？提前谢谢！

Answer 1

您可以将width: 100%替换为left: 0; right: 0。

或者，您可以保留width: 100%，但是您需要删除margin上的默认body：

html, body {
    margin: 0;
    padding: 0;
}

Answer 2

确保它没有边距并将left设置为0，以便忽略body DOM对象的填充。

Answer 3

你可能在BODY上有填充/边距（它有默认的边距）还要检查css中是否存在影响元素的填充/边距继承

Answer 4

我发现您提供的代码没有任何问题。不过你的#top div在另一个div里面吗？如果是这样，请确保该div中没有填充。我建议您使用Firefox和FireBug，因为它是调试html，css和javascript的最佳工具。

修正顶部div无法正常工作

4 个答案: