Html 如何使导航栏全宽

我希望将导航栏拉伸到浏览器的边缘。我可以通过按像素指定宽度来做到这一点，但当我设置width=“100%”时，它不起作用+它在底部显示滚动条……那么我如何使它水平拉伸到浏览器的窗口大小呢

这是最新的

身体{
左边距：0px；
边际上限：0px；
右边距：0px；
边缘底部：0px；
}
#导航{
浮动：左；
字体：粗体12px Arial，Helvetica，无衬线；
边框：1px实心#121314；
边框顶部：1px实心#2b2e30；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：0px；
溢出：隐藏；
宽度：100%；
}
#导航ul{
保证金：0；
填充：0；
列表样式：无；
}
#李国荣{
浮动：左；
}
#海军ulli a{
浮动：左；
颜色：#D4；
填充：15px 97px；
文字装饰：无；
背景#3C4042；
背景：-webkit渐变（线性，左下，左上，颜色停止（0.09，rgb（59,63,65）），颜色停止（0.55，rgb（72,76,77）），颜色停止（0.78，rgb（75,77,77））；
背景：moz线性梯度（中底，rgb（59,63,65）9%，rgb（72,76,77）55%，rgb（75,77,77）78%）；
背景：-o-线性梯度（中底，rgb（59,63,65）9%，rgb（72,76,77）55%，rgb（75,77,77）78%）；
框阴影：0 1px 0 rgba（255，255，255，0.1）插入，0 0 5px rgba（0，0，0.1）插入；
左边框：1px实心rgba（255,255,255,0.05）；
右边框：1px实心rgba（0,0,0,0.2）；
文本阴影：0-1px1pRGBA（0,0,0,0.6）；
}
#导航李a：悬停，
#导航ulli：悬停>a{
颜色：红色；
背景#3C4042；
背景：-webkit渐变（线性，左下，左上，颜色停止（0.09，rgb（77,79,79）），颜色停止（0.55，rgb（67,70,71）），颜色停止（0.78，rgb（69,70,71））；
背景：moz线性梯度（中底，rgb（77,79,79）9%，rgb（67,70,71）55%，rgb（69,70,71）78%）；
背景：-o-线性梯度（中底，rgb（77,79,79）9%，rgb（67,70,71）55%，rgb（69,70,71）78%）；
文本阴影：0 1px 0 rgba（255，255，255，0.2），0-1px#000；
}
#导航：悬停，
#导航ul li:悬停>a{
颜色：#2c2c；
背景：#5C9ACD；
背景：-webkit渐变（线性，左下，左上，颜色停止（0.17，rgb（6111177）），颜色停止（0.51，rgb（80136199）），颜色停止（1，rgb（92154205））；
背景：莫兹线性梯度（中底，rgb（6111177）17%，rgb（80136199）51%，rgb（92154205）100%）；
背景：-o-线性梯度（中底，rgb（6111177）17%，rgb（80136199）51%，rgb（92154205）100%）；
边框底部：1px实心rgba（0,0,0,0.6）；
边框顶部：1px实心#7BAED9；
文本阴影：0 1px rgba（255,255,255,0.3）；
}
#李海军：悬停{
左：自动；
}
#导航李莉：悬停{
能见度：可见；
}

宽度指定内容的宽度。填充和边框大小将添加到指定的宽度。如果希望它（包括边框）为100%，则必须删除边框

请参见此图：

 _______________________
|  margin               |
|  ___________________  |
| |  border           | |
| |  _______________  | |
| | |  padding      | | |
| | |  ___________  | | |
| | | |  content  | | | |
| | | |___________| | | |
| | | |           | | | |
| | | |<- width ->| | | |
| | |_______________| | |
| |___________________| |
|_______________________|

_______________________
|边际|
|  ___________________  |
||边界||
| |  _______________  | |
|| |填充| ||
| | |  ___________  | | |
|| | | | | ||
| | | |___________| | | |
| | | |           | | | |
| | | || | | |
| | |_______________| | |
| |___________________| |
|_______________________|

#nav

是100%宽度，但是单个按钮没有占用您想要的空间，因为它们符合文本的宽度（

宽度：auto

）。要获得想要的效果（对于任意数量的按钮），最简单的方法是使用宽度为100%的

表格。一个更复杂的方法是给每个按钮一个相等的宽度百分比，这样按钮的数量加起来就等于100%。你有5个按钮，所以你可以把
宽度：20%打开
#导航ul li
。您还需要消除此样式上的大97px左右填充，并选择一个小得多的值

要处理底部的滚动条，请指定
框大小：边框框在
#nav
上，我请求您尝试设置“ul li a”而不是“ul li”元素的样式。正如上面提到的人给每个li元素20%的比例，用“框大小：边框框”来设计所有元素，您就可以开始了；）
在这里您可以看到解决方案：
但请注意是否需要支持较旧的浏览器。尽量避免使用表格进行布局。没错，但我相信时代已经改变了@MagnaMaster可能需要将97px的填充设置为更小的值（比如4px）。您还需要将一些样式移动到适当的位置，您的背景位于
li
而不是
a
，并且您可能希望将
文本对齐：居中
应用于
#nav ul li
，因为您似乎希望居中文本。@MagnaMaster宽度将为20%。现在你可以从填充物中获得宽度，但目标是从20%的填充物中获得宽度。只要确定你的风格是在正确的地方。背景渐变和其他一些样式现在应用于内联元素（
a
）而不是容器（
li
）。我删除了边框并添加了宽度：100%；在nav上，但得到相同的东西删除
#nav上的边框为我删除了滚动条。非常好，但是当鼠标悬停时，我如何使整个单元格高亮显示？同样在firefox上，登录/注册转到下一行，但它在chrome和safari上工作…css在IE 9上不显示
 _______________________
|  margin               |
|  ___________________  |
| |  border           | |
| |  _______________  | |
| | |  padding      | | |
| | |  ___________  | | |
| | | |  content  | | | |
| | | |___________| | | |
| | | |           | | | |
| | | |<- width ->| | | |
| | |_______________| | |
| |___________________| |
|_______________________|