HTML新手求助：如何将h1文本置于nav导航栏下方？

嘿，我来帮你搞定这个问题！从你的代码来看，问题大概率出在CSS布局上——默认情况下nav和h1都是块级元素，应该会自动上下排列，但如果你的CSS里给nav或者.wrapper加了浮动、inline-block这类属性，就会导致h1没法乖乖待在导航栏下方。

下面给你几个最常见的解决方案：

方案1：清除浮动（如果你的nav用了float） #

如果你的CSS里给nav设置了float: left或者float: right，浮动元素会脱离文档流，导致后面的h1会往上跑。这时候需要给父容器.wrapper添加清除浮动的样式：

.wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* 你的nav样式示例（如果用了浮动） */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  float: left; /* 假设你用了浮动 */
}
nav li {
  display: inline-block;
  margin-right: 20px;
}

这样.wrapper就能正确包裹浮动的nav，h1自然会回到导航栏下方。

方案2：用Flexbox垂直排列（推荐） #

如果想更简洁地实现垂直布局，直接给.wrapper设置Flexbox属性，强制子元素（nav和h1）上下排列：

.wrapper {
  display: flex;
  flex-direction: column; /* 垂直方向排列 */
}

/* 基础的导航栏样式 */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 让导航项横向排列 */
  gap: 20px; /* 导航项之间的间距 */
}
nav a {
  text-decoration: none;
  color: #333;
}

对应的HTML保持你原来的结构即可：

<body>
  <div class="wrapper">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
    <h1>Test.</h1>
  </div>
</body>

小提示 #

你可以先检查自己的CSS文件，看看有没有给nav设置display: inline-block或者float这类会改变元素布局的属性，这些都是导致h1位置异常的常见原因。

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