学校网页项目：CSS调整h1下移让出顶部导航空间并恢复居中

你之前的调整完全不生效，根本不是h1的样式写得不对，是代码从HTML结构到CSS类名匹配层面堆了一堆bug，所有写的规则都没真正作用到页面元素上。

现存的具体bug #

• 结构错误：把导航、h1这些页面可见内容全写在<head>标签里了。HTML规范要求head里只能放元信息、样式引用，不能放可见内容，浏览器解析这种错位代码时会自动打乱原有的DOM顺序，样式计算逻辑全乱。
• 类名完全不匹配：
  • CSS里写的导航选择器是.tobnav（还把top拼错成了tob），HTML里给导航加的类名是topNav（N是大写），拼写、大小写全对不上，导航的样式根本加载不上。
  • CSS里写的h1选择器是.header h1，但你的h1根本不在带header类的容器里，所有针对h1写的颜色、高度、外边距规则全是无效的。
• 导航逻辑冲突：给导航里的a标签加了float: left，但之前给ul设了text-align: center，浮动元素会脱离普通文档流，根本不吃文本居中的规则，导航块和下面的h1会互相挤压。
• 无效嵌套：用<p>标签把整个导航块包起来了，p是纯文本语义的行级容器，不适合包块级导航，多余嵌套会额外产生意外的边距。

实现需求的调整步骤 #

要达成「h1下移给导航留足够空间、同时保持h1居中」的效果，按下面的逻辑改就行：

1. 先把HTML结构掰回浏览器能正常解析的状态：
   • 把所有可见内容从head挪到新开的<body>标签里
   • 删掉包着导航的多余<p>标签
   • 把导航类名统一成和CSS匹配的topnav，ul里面用li标签嵌套a链接，符合列表语义
2. 调整CSS规则：
   • 去掉导航a标签的float: left，靠ul的text-align:center实现导航项居中，不会脱离文档流占空间
   • 把h1的选择器改成直接选中页面里的h1元素，加合适的上外边距把h1位置往下推，和导航留出足够间距
   • 删掉h1上之前设的height: 100px; line-height:2，这种大固定高度+行高的写法很容易把h1的文字推到看不见的位置
3. 顺手修正viewport里的拼写错误：把initalscale改成initial-scale，不然移动端适配规则也不生效。

修正后的完整代码 #

HTML部分 #

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Sehenswürdigkeiten USA </title>
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <div class="topnav">
    <ul>
      <li><a class="active" href="#home"> Home </a></li>
      <li><a href="#Impressum">Impressum</a></li>
      <li><a href="Contact"> Contact</a></li>
    </ul>
  </div>
  <h1>Es gibt viele schöne Sehenswürdigkeiten in den USA</h1>
</body>
</html>

CSS部分 #

/* 导航样式修正，解决浮动和居中的逻辑冲突 */
.topnav {
  overflow: hidden;
  background-color: blue;
}

/* 让li变成行内块实现横向排布，不需要浮动 */
.topnav ul li {
  display: inline-block;
}

.topnav a {
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  /* 删掉之前的float:left，避免破坏居中逻辑 */
}

.topnav a:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(29, 4, 255);
}

.topnav a.active {
  background-color: #f80000;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* 修正h1选择器，加足够的上外边距实现下移效果 */
h1 {
  color: rgb(255, 0, 0);
  /* 2rem的上外边距刚好把h1往下推，给导航留足展示空间 */
  margin-top: 2rem;
  text-align: center;
  /* 删掉之前多余的固定高度和行高，避免文字位置错乱 */
}

body {
  text-align: center;
}

p {
  font-size: 130%;
}

table, td, th {
  border: 1px solid rgb(7, 7, 7);
}

table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  text-align: center;
  padding: 15px;
}

th {
  height: 70px;
}

改完之后导航会正常横向居中展示，h1会在导航下方留出合适空隙后自动居中，不会出现元素重叠、位置偏移的问题。

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