Question

CSS上的容器宽度为100％，但在页面结束前稍稍停止。

使用HTML

<div id="nav-container">
                    <ul id ="nav-list">
                        <li id=nav-title>lymbo</li>
                        <li><a href="#">Playmaps</a></li>
                        <li><a href="../map.html">Map</a></li>
                        <li><a href="../about.html">About</a></li>
                        <li><a href="#">My Account</a></li>
                        <li><a href="#">Log Out</a></li>
                    </ul> 
</div>

使用CSS

    #nav-container {
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
        float: top;
        padding-top: 15px;
        text-align: left;
        -webkit-box-shadow: 0px 0px 8px 0px #000000;
        -moz-box-shadow: 0px 0px 8px 0px #000000;
        box-shadow: 0px 0px 8px 0px #000000;
        background-color: rgba(0, 70, 12, 0.5);
        border-bottom: 1px solid #ccc; 
        border-top: 1px solid #ccc; 
}

如果有人知道为什么我的标题会干扰我的导航栏，我想听听你的意见。我希望我的导航栏像Twitter导航栏一样有一点“渐变”，但我使用的教程很接近，但没有骰子。

Answer 1

在＃nav-container中，添加边距和位置控制，如下所示：

#nav-container {
    margin:0px auto;
    left:0px;
    right:0px;
}

由于您使用的是导航列表，因此您应该添加CSS来控制列表的边距，如下所示：

#nav-list {
    list-style-type:none;
    margin:0;
}

list-style-type:none;将删除列表中的项目符号点（如果愿意）。

最后，对于某些浏览器，在<body>标记中将边距设置为零可能是明智之举，如下所示：

<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">

Answer 2

尝试将left: 0;添加到您的CSS中。正如其他人所提到的，您不需要float属性。

Answer 3

由于我看不到JSFiddle，我无法测试它。

但我认为div已经在页面的整个宽度上。它可能是尚未在页面的100％上的列表。放宽：100％在那里，看看会发生什么。

Answer 4

我敢打赌，您的nav-container位于另一个div（container-fluid）内，该div已应用padding-left。

Answer 5

默认元素周围有一些空间。这就是使用重置样式的常见原因。将它添加到主样式表的开头，因为它是一个很好的实践。

* {
  margin: 0;
  padding: 0;
}

为什么我的导航栏不能覆盖整个网站的宽度？

5 个答案: