我刚开始编码一段时间后，所以我尝试了 w3schools 中的那个，在我输入 lorem ipsum 段落来填充它后它就起作用了。它首先将 h3 移到导航栏旁边，然后将其移到导航栏上方。而且它没有自己的空间。
然后我使用了其他网站的一些代码，但没有成功
<nav> <ul id="horBar"> <li><a href="home.html">Home</a></li> <li><a href="customer.html">Customer</a></li> <li><a href="products.html">Products</a></li> <li><a href="orders.html">Orders</a></li> <li><a href="reports.html">Reports</a></li> <li><a href="administrations.html">Administrations</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav>CSS代码
h2{
position: relative;
text-align: center;
letter-spacing: 5px;
word-spacing: 5px;
font-size: 40px;
font-family: Header;
}
...
nav{
position: absolute;
display: inline-block;
list-style: none;
}
ol,
ul {
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
h1 {
padding: 13px;
}
#horBar {
margin: 11px;
font-family: Serif;
width: 1000px;
}
#horBar li {
display: block;
width: 117px;
float: left;
margin-left: 4px;
border: 2px double rgb(82, 20, 20);
}
#horBar a {
color: #006;
background-color: rgb(255, 255, 255);
text-decoration: none;
padding: 4px;
display: block;
}
#horBar a:hover {
color: rgb(237, 124, 124);
background-color: #006;
}
我不确定这是否是你的意思。因为您的导航位于绝对位置，所以它与所有内容分开。如果您将导航定位为相对位置，那么它应该自动成为所有内容的一部分，否则您可以在身体上留出边距以将其绝对定位，然后如果您想拉伸它因为它是绝对的，所以你需要使用左右和顶部来移动它。让我知道这是否是您的意思。
h2{
position: relative;
text-align: center;
letter-spacing: 5px;
word-spacing: 5px;
font-size: 40px;
font-family: Header;
}
nav{
position: relative;
display: inline-block;
list-style: none;
}
ol,
ul {
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
h1 {
padding: 13px;
}
#horBar {
margin: 11px;
font-family: Serif;
width: 1000px;
}
#horBar li {
display: block;
width: 117px;
float: left;
margin-left: 4px;
border: 2px double rgb(82, 20, 20);
}
#horBar a {
color: #006;
background-color: rgb(255, 255, 255);
text-decoration: none;
padding: 4px;
display: block;
}
#horBar a:hover {
color: rgb(237, 124, 124);
background-color: #006;
}<nav>
<ul id="horBar">
<li><a href="home.html">Home</a></li>
<li><a href="customer.html">Customer</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="orders.html">Orders</a></li>
<li><a href="reports.html">Reports</a></li>
<li><a href="administrations.html">Administrations</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<body> <h2> Future about cars </h2> <h3>What is a future car?</h3> <p>"Lorem ipsum paragraphs"</p> </body>