如何让导航栏在页面HTML CSS的整个宽度上伸展

我正在尝试创建一个网站，但在尝试让菜单栏在整个网页宽度上伸展时遇到了问题。有人能帮忙吗？ 以下是我的菜单栏CSS/HTML：

ul{
列表样式类型：无；
边际：0px；
左侧填充：2px；
位置：固定；
顶部：0px；
字距：2px；
}
li{
浮动：左；
显示：内联；
字距：2px；
左侧填充：70px；
背景色：#610000；
}
#菜单栏a{
显示：内联；
文本对齐：居中；
文字装饰：无；
字体大小：15px；
字体系列：PT sans，sans serif；
颜色：#FFDFC1；
左侧填充：0px；
}
#菜单栏a：悬停{
颜色：#092601；
背景色：#610000；
}
#菜单栏。活动{
颜色：#092601；
}
身体{
背景色：#ffffff；
左边距：350px；
}

li{
背景色：#610000；
}
#菜单栏a{
文字装饰：无；
字体大小：15px；
字体系列：PT sans，sans serif；
颜色：#FFDFC1；
}
#菜单栏a：悬停{
颜色：#092601；
背景色：#610000；
}
#菜单栏。活动{
颜色：#092601；
}
保险商实验室{
填充：0；
显示：-网络工具包盒；
显示器：-moz盒；
显示：框；
}
李{
列表样式：无；
列表样式：无；
文本对齐：居中；
-webkit-box-flex:1；
-moz-box-flex:1；
箱型柔性：1；
}
身体{
边际：0px；
}

为什么要在css中设置正文的剩余边距？请删除该边距

这可能对你也有帮助

---

使其与您的屏幕大小相对

使用

vw

装置。因此，要安装它，请在您的

ul

上使用

100vw

然后在您的

li

中。。删除左侧的

填充。

然后

将其宽度设置为父ul的宽度除以子li的数量

宽度：计算（100%/6）

注意：
calc（）
函数仅适用于现代浏览器。。如果需要，可以手动设置


ul{
列表样式类型：无；
边际：0px；
左侧填充：2px；
位置：固定；
顶部：0px；
字距：2px；
宽度：100vw；
}
li{
浮动：左；
宽度：计算值（100%/6）；
显示：内联；
字距：2px；
背景色：#610000；
}
#梅努巴{
宽度：100%；
}
#菜单栏a{
显示：内联；
文本对齐：居中；
文字装饰：无；
字体大小：15px；
字体系列：PT sans，sans serif；
颜色：#FFDFC1；
左侧填充：0px；
}
#菜单栏a：悬停{
颜色：#092601；
背景色：#610000；
}
#菜单栏。活动{
颜色：#092601；
}
身体{
背景色：#ffffff；
}









1）给出html和正文宽度：100%

2） 给出ul宽度：100%

3） 拆下车身边缘

4） 给ul背景色而不是li，你会注意到差异


html，正文{
宽度：100%；
保证金：0；
}
身体{
背景色：#ffffff；
}
保险商实验室{
位置：固定；
排名：0；
左：0；
列表样式：无；
边际：0px；
左侧填充：2px；
字距：2px；
背景色：#610000；
}
li{
浮动：左；
字距：2px；
左侧填充：70px；
}
#梅努巴{
显示：内联块；
宽度：100%；
}
#菜单栏a{
文本对齐：居中；
文字装饰：无；
字体大小：15px；
字体系列：PT sans，sans serif；
颜色：#FFDFC1；
左侧填充：0px；
}
#菜单栏a：悬停{
颜色：#092601；
背景色：#610000；
}
#菜单栏。活动{
颜色：#092601；
}







您的HTML在问题中实际呈现，因此我们无法很容易地看到代码。请创建一个JSFIDLE或代码片段。您是否尝试过给您的#菜单栏
宽度：100%？非常感谢您的回答，可能是重复的，但它仍然不起作用。这只会将整个页面向左移动。而我正试图创建一个覆盖整个屏幕的单页网页，它只是一个滚动功能。但我无法让菜单栏延伸到整个页面顶部？抱歉，更新了基于