求助：CSS导航栏无法铺满页面问题（附HTML/CSS代码）

我帮你排查了代码，发现导航栏不能撑满页面两端主要是两个原因：浏览器默认给body设置了margin，还有菜单ul的定位方式导致它没有正确填充父容器。下面是具体的修复步骤：

1. 重置body的默认边距 #

几乎所有浏览器都会给body添加默认的margin: 8px，这会让你的固定定位导航栏即使设置了width: 100%，也会被挤得两边留出空白。我们先把这个默认样式重置掉：

body {
  margin: 0;
  padding: 0;
}

2. 调整导航菜单的ul样式 #

你原来给ul设置了position: absolute，这会让它脱离文档流，无法自动适应.nav-bar的宽度。同时float: center是无效属性（float只有left/right/none），我们一起修正：

/* 修改ul的样式 */
ul {
  list-style-type:none;
  margin:0;
  padding: 0; /* 消除ul的默认内边距 */
  /* 移除 position: absolute; */
  width: 100%; /* 让ul填满.nav-bar的宽度 */
  display: flex; /* 用flex实现菜单水平居中排列 */
  justify-content: center;
}

/* 修改li的样式 */
li {
  /* 移除 float: center; 该属性无效 */
  margin-right: 1px;
}

3. 确保.nav-bar无额外内边距 #

为了让菜单完全贴合导航栏宽度，给.nav-bar添加padding: 0：

.nav-bar {
  top: $banner-height;
  background: #FFFFFF;
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.11), 0px 4px 6px 0px rgba(0,0,0,0.11);
  width: 100%;
  line-height: $banner-height;
  text-align: center;
  padding: 0; /* 新增这一行 */
}

修改后的完整CSS代码 #

$banner-height: 50px;
@import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';

/* 新增body重置样式 */
body {
  margin: 0;
  padding: 0;
}

nav {
 height: $banner-height * 2;
 position: fixed;
 width: 100%;
 top: 0;
 transition: top 0.2s ease-out;
}
.banner {
 text-align: center;
 line-height: $banner-height;
 top: 0;
 width: 100%;
 background: #FEFFB7;
 box-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.13);
}
.nav-bar {
 top: $banner-height;
 background: #FFFFFF;
 box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.11), 0px 4px 6px 0px rgba(0,0,0,0.11);
 width: 100%;
 line-height: $banner-height;
 text-align: center;
 padding: 0; /* 新增内边距重置 */
}
.nav-up {
 top: -$banner-height;
}

/* 修改后的菜单基础样式 */
ul {
 list-style-type:none;
 margin:0;
 padding: 0;
 width: 100%;
 display: flex;
 justify-content: center;
}
li {
 display:inline-block;
 margin-right: 1px;
}

/* 原有交互样式保持不变 */
li a {
 display:block;
 min-width:140px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 color: #fff;
 background: #2f3036;
 text-decoration: none;
}
li:hover a {
 background: #19c589;
}
li:hover ul a {
 background: #f3f3f3;
 color: #2f3036;
 height: 40px;
 line-height: 40px;
}
li:hover ul a:hover {
 background: #19c589;
 color: #fff;
}
li ul {
 display: none;
 position: absolute; /* 下拉菜单保留绝对定位 */
 flex-direction: column; /* 下拉菜单垂直排列 */
 width: auto;
}
li ul li {
 display: block;
}
li ul li a {
 width: auto;
 min-width: 100px;
 padding-left: 0px;
 padding-right: 0px;
}
ul li a:hover + .hidden, .hidden:hover {
 display: block;
}
.show-menu {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 text-decoration: none;
 color: #fff;
 background: #19c589;
 text-align: center;
 padding-left: 0px;
 padding-right: 0px;
 display: none;
}
input[type=checkbox]{
 display: none;
}
input[type=checkbox]:checked ~ #menu{
 display: flex;
 flex-direction: column;
}

/* 响应式样式适配 */
@media screen and (max-width : 760px){
 ul {
 position: static;
 display: none;
 flex-direction: column;
 }
 li {
 margin-bottom: 1px;
 }
 ul li, li a {
 width: 100%;
 }
 .show-menu {
 display:block;
 }
}

效果说明 #

修改后：

• 顶部banner和导航栏会完全延伸到页面左右两端，消除空白
• 导航菜单保持居中排列，下拉菜单功能不受影响
• 小屏幕下的响应式布局依然正常工作

内容的提问来源于stack exchange，提问作者Hamza