我正在做一个学校项目，我希望我的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>

这里也做了一些更正；

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>

你不需要在div周围使用P标签，它做的事情基本上是一样的，即提供默认宽度和换行属性等。其次，在div内部使用P是非常糟糕的做法。跳水内侧p不太好。这只会使事情变得复杂。。。因此将其移除
您的css存在命名约定问题。。。在您使用的是html中的topNav和css中的
tobnav或
topNav。它区分大小写，所以请确保你们在任何地方都使用相同的大小写和拼写
从h1标签中删除margin-top实际上没有必要
解决方案：将margin-bottom添加到topNav类中，有意放置200px，您可以将其调整到您喜欢的距离

相关内容

最新更新

热门标签：