新增子页面Navbar样式异常求助：背景过高且自定义类无效

问题现象 #

网站所有页面使用相同导航栏代码，但新增子页面的导航栏背景高度异常过高，尝试新增自定义CSS类复制原样式也无效。

正常首页导航栏：

异常子页面导航栏：

问题原因 #

你的CSS代码存在两处关键问题：

1. .nav类的padding: 40缺少单位，浏览器会将其解析为异常值，直接撑高了导航栏背景；
2. 全局a标签样式color: black会覆盖.a类的白色文字设置，可能导致导航文字显示异常。

修复方案 #

修改CSS代码，补充单位并调整样式优先级：

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0; /* 替换无单位的40，可根据需求调整为如0 10px */
  overflow: hidden;
  background-color: #333;
}

.li {
  float: left;
}

.a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  color: white !important; /* 提升优先级，确保文字显示白色 */
  text-decoration: none;
}

.a:hover {
  background-color: #111;
  color: white;
}

#active {
  background-color: lightskyblue;
  color: black !important;
}

同时确保所有页面的导航栏HTML结构完全一致：

<ul class="nav">
  <li class="li"><a href="index.php" class="a">Home </a></li>
  <li class="li"><a href="stundenplan.php" class="a">Stundenplan SJ 22/23</a></li>
  <li class="li"> <a href="infos.php" class="a">über mich </a></li>
  <li class="li"> <a href="seiten.php" class="a"> Meine Lieblingsseiten</a></li>
  <li class="li"> <a href="formular.php" id="active" class="a"> Taschenrechner</a></li>
  <li class="li" style="float:right"> <a href="https://www.stocki.sg-hdh.de/" target="_blank" class="a"> Beispielseite Herr Stocki </a></li>
</ul>

额外排查点 #

若新增自定义类仍无效，检查以下内容：

• 自定义类名是否正确添加到HTML元素上；
• 自定义CSS是否被其他高优先级样式覆盖（可通过浏览器开发者工具查看）；
• CSS文件是否在新页面中正确引入。

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