如何让nav bar铺满整个页面 消除侧边留白问题

调整方法 #

• 首先清除浏览器默认边距：所有主流浏览器都会为<html>、<body>以及<ul>这类列表元素内置默认的内外边距，这是侧边出现空白的核心原因，可通过CSS重置这部分默认样式：

/* 通配符可快速重置所有元素的默认边距，也可针对性只重置相关元素 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 给导航栏的<ul>标签添加全屏适配样式，如需横向排列导航可配合flex布局实现：

.nav-list {
  width: 100%;
  /* 下方为横向导航可选样式，可根据需求调整 */
  display: flex;
  gap: 2rem;
  padding: 1rem 2rem;
  background: #333;
  color: #fff;
  list-style: none;
}

• 如果你不需要使用flex布局，也可以给<li>设置display: inline-block属性实现横向排列，效果一致。

完整可运行示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>全屏导航示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .nav-list {
      width: 100%;
      display: flex;
      list-style: none;
      gap: 30px;
      padding: 12px 20px;
      background-color: #2c3e50;
      color: white;
    }
    .nav-list li {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <ul class="nav-list">
    <li>Home</li>
    <li>News</li>
    <li>SignIn</li>
  </ul>
  <div>
    <!-- 页面其他内容 -->
  </div>
</body>
</html>

注：box-sizing: border-box属性可以保证你给元素添加内边距时不会撑宽容器，避免出现横向滚动条。

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