Question

为什么导航栏溢出容器，如链接图片中所示：

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

这是包含HTML导航的部分：

＆＃13;

    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;
    }

＆＃13;

 <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>`

＆＃13;

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结束后你还有一个额外的角色。

HTML / CSS：导航栏不适合容器布局

2 个答案: