时间戳

首页 > 解决方案 > 我正在做一个学校项目，我希望我的 h1 向下移动一排，以便我的 h1 再次居中

html - 我正在做一个学校项目，我希望我的 h1 向下移动一排，以便我的 h1 再次居中

问题描述

所以目前我正在尝试h1向下移动一点，以便我的顶部nav是自由的并且我h1的再次居中。我已经尝试了一些东西，但没有奏效。（我的工作很乱，提前抱歉）。

header {
  background-color: #f1f1f1;
  text-align: center;
}

.header h1 {
  color: rgb(255, 0, 0);
  margin-top: 0;
  text-align: center;
  height: 100px;
  width: 100%;
  line-height: 2;
}

.tobnav {
  overflow: hidden;
  background-color: blue;
}

.topnav a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.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;
}

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;
}
<html>.

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

标签： htmlcss

解决方案

在这里你也做了一些更正；

header {
  background-color: #f1f1f1;
  text-align: center;
}

.header h1 {
  color: rgb(255, 0, 0);
  text-align: center;
  height: 100px;
  width: 100%;
  line-height: 2;
}

.topNav {
  overflow: hidden;
  background-color: blue;
  margin-bottom: 200px;
}

.topNav a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.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;
}

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;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initalscale=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>

  1. 您不会在 div 周围使用P标签，它的作用几乎相同，即提供默认宽度和换行符属性等。其次，它在 div 内的 P 是非常糟糕的做法。p里面的div不太好。它只会使事情变得复杂......所以删除了它。
  2. 您的 css 有命名约定问题...在您使用 html 中的topNav和 css 中的tobnav或topnav时。它区分大小写，因此请确保在每个地方都使用相同的大小写和拼写。
  3. 从h1标签中删除了margin-top真的没有必要
  4. 解决方案：在topNav类中添加了margin-bottom ，故意放了 200px，你可以将它调整到你喜欢的距离。

推荐阅读