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

Posted 2023-03-06

【中文标题】HTML/CSS：导航栏不适合容器布局[关闭]

【英文标题】：HTML/CSS: navigation bar won't fit inside the container layout [closed]

【发布时间】：2015-02-20 18:32:35

【问题描述】：

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

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

【问题讨论】：

你的问题是什么？

使用 jsfiddle 将所有内容捆绑在一个地方。这是没有完整 html/css 的毫无意义的问题

周边代码，css？

@LiamSorsby 查看链接的图片：导航栏与布局的其余部分“不匹配”。

您的 CSS 似乎有问题。您尚未（尚未）包括在内，以便我们为您提供帮助...

【参考方案1】：

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

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

见JSFiddle

【讨论】：

谢谢，这是我错过的东西。我为不完整的代码和所有内容道歉，我是第一次来这里，所以我不知道如何正确使用所有内容。

【参考方案2】：

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

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

---

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

---

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

【讨论】：

嘿，感谢您为我审阅此内容。我还在弄清楚如何使用 ***，看起来像一个可爱的社区，我从这里学到了很多东西，我只是想知道下一步该做什么。我在内容和侧边栏部分的高度和宽度方面遇到了一些问题，但这可能是因为使用了浮动，所以我将检查绝对定位并看看会发生什么。额外的字符是我试图弄清楚如何在这里发帖：D 对于初学者来说，这有点令人困惑。非常感谢！

@bellalugosi：尝试使用tour，因为它将帮助您了解我们的工作方式。差不多，给我们一个好的、可行的、可理解的问题（最好有一个工作示例，比如 jsfiddle（提示。谷歌那个）），我们会尽力回答它。就 floats 而言，它们可以（慢慢地）远离它们，并且仅在您需要它们时使用