HTML/CSS：导航栏不适合容器布局[关闭]

Question

为什么我的导航栏会溢出容器，如链接图片：

http://i.stack.imgur.com/AGoOd.png

这是包含 HTML 导航的部分：

    body {
    	font-family:Arial, Helvetica, sans-serif;
    	background-image: url('../Images/Background1.jpg');
    }


    #wrapper {
    	width: 1000px;
    	margin: 0px auto;
    }


    #header {
    	background-color:#FFFFFF;
    	width: 100%;
    	overflow: hidden;
    	padding: 10px 0px;
    }
    #logo img {
    	float: left;
    }
    #logo1 img {
    	margin-top: 30px;
    	float: right;
    }


    #banner {
    	width: 100%;
    	height: 50px;
    	background-color: #666666;
    	color:#FFFFFF;
    	padding: 10px 0px;
    }
    li {
    	list-style-type: none;
    }
    #nav {
    	background-color: #333333;
    	font-size: 13px;
    	clear: both;
    }
    #nav ul {
    	width: 100%;
    	float: left;
    	background-color: #333333;
    	margin: 0px;
    }
    #nav ul li{
    	display: inline;
    }
    #nav a:link {
    	color: white;
    }
    #nav a:visited {
    	color: white;
    }
    #nav a:active {
    	color: white;
    }
    #nav a:hover {
    	color: white;
    	background-color: #CCCCCC;
    }
    #nav a:focus {
    	color: white;
    }


    #sidebar  {
    	width: 300px;
    	height: 700px;
    	float: left;
    	background-color:#CCCCCC;
    }


    #content {
    	width: 700px;
    	float: right;
    	height: 700px;
    	background-color: #E5E5E5;
    	overflow: auto;
    }


    #footer {
    	width: 100%;
    	background-color: #666666;
    	padding: 20px 0px;
    }

 <div id="nav">
		<ul>
			<li><a href="nv1.html">1</a></li> 
			<li><a href="nv2.html">2</a></li>
			<li><a href="nv3.html">3</a></li> 
			<li><a href="nv4.html">4</a></li>
			<li><a href="nv5.html">5</a></li>
			<li><a href="nv6.html">6</a></li>
			<li><a href="nv7.html">7</a></li>
			<li><a href="nv8.html">PROMOTIONS</a></li>
			<li><a href="nv9.html">TRANSPORTATION</a></li>
		</ul>
	</div>`

Answer 1

这看起来像一个填充问题 - 额外的似乎是 ul 元素的默认填充左侧。只需稍微改变你的 CSS：

#nav ul {
    width: 100%;
    float: left;
    background-color: #333333;
    margin: 0px;
    padding: 0;
}

见JSFiddle

Answer 2

您的问题似乎与您对 floats 的使用有关（在此示例中这不是一个很好的用途。）

相反，您应该考虑使用absolute positioning，而不是left:0; 或right:0;。

---

我还建议使用%'s 作为单位，而不是固定的px 大小（这样您的网站将变得更加响应），

---

另外，在关闭最后一个 div 后，您还有一个实际上不需要的额外字符。