1

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 导航栏一样有一点“渐变”，但我使用的教程很接近但没有骰子。

4

5 回答 5

3

在#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">
于 2013-05-29T15:50:51.720 回答
1

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

于 2013-05-29T13:47:35.183 回答
0

由于我看不到 JSFiddle，因此无法对其进行测试。

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

于 2013-05-29T13:44:38.497 回答
0

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

* {
  margin: 0;
  padding: 0;
}
于 2013-06-11T23:42:28.997 回答
0

我敢打赌，你nav-container在另一个 div ( container-fluid) 中，它已经padding-left应用了它。

于 2013-06-11T23:36:02.973 回答