导航栏(Nav bar)偏右约50px，位置配置无效求助

算力阿峰

2026-8-23

导航栏偏右问题的解决方法

核心问题分析

从你提供的代码来看，有两个关键问题导致导航栏偏移：

HTML结构非法：<ul class="nav-bar"> 内部直接嵌套了 <div class="bg"></div>，而<ul>的合法直接子元素只能是<li>，这个非法元素会破坏列表默认布局逻辑，引发偏移。
浏览器默认样式未重置：<ul>、<nav>等元素自带浏览器默认的内边距/外边距（比如<ul>默认有padding-left），这些默认样式会干扰自定义布局。

具体修复步骤

1. 修正HTML结构

移除<ul>内部的非法<div>，若需要背景元素，可将其放在<ul>外部或作为<li>子元素：

<header>
  <nav>
    <ul class="nav-bar">
      <li>
        <a class="nav-link" href=""></a>
      </li>
      <li>
        <a class="nav-link" href=""></a>
      </li>
      <li><a class="nav-link" href="">Test</a></li>
      <li><a class="nav-link" href="">Test</a></li>
    </ul>
  </nav>
</header>

2. 重置默认样式

在CSS中添加对<nav>和<ul>的默认样式重置，消除浏览器自带边距：

/* 重置nav的默认边距 */
nav {
  margin: 0;
  padding: 0;
}

.nav-bar {
  list-style: none;
  position: relative;
  display: inline-flex;
  /* 移除ul默认的左内边距 */
  padding-left: 0;
  margin: 0;
}

当前header使用justify-content: space-around，若要导航栏严格居中，可改为justify-content: center：

header {
  margin: 0 auto;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  /* 改为center实现严格居中 */
  justify-content: center;
  background: transparent;
  position: fixed;
  top: 0;
  transition: 0.3s;
  z-index: 5;
}