当我尝试在导航栏后面放置文本时，它被卡在同一行。目前正在尝试进行 freecodecamp 响应式网页设计认证，所以有点菜鸟，而且我意识到我的代码可能有点困惑。对此仍然陌生，我不确定某些代码是如何工作的，例如将我的导航栏定位为一个 block ，我觉得这可能会导致问题。任何建议将不胜感激。
html {
background: url("https://www.toptal.com/designers/subtlepatterns/patterns/ep_naturalwhite.png");
}
.image-center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
#header-img {
border-radius: 15%;
object-fit: cover;
height:200px;
}
.nav-link {
font-family: 'Roboto', sans-serif;
font-weight: bold;
font-size: 20px;
color: white;
background: rgb(47, 204, 118);
text-decoration: none;
text-align: center;
position: block;
}
.nav-link:hover {
color: rgb(47, 204, 118);
background: white;
transition: 0.5s;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #1e1e24;
}
body::-webkit-scrollbar-thumb {
background: #6649b8;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width:40%;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 17px;
margin:0 auto;
}
body {
position: relative;
text-align: center;
text-justify: center;
}
h3 {
font-family: calibri;
font-size: 20px;
}<header id="header">
<img src="https://www.freelogodesign.org/file/app/client/thumb/57b26682-f831-4123-9003-93366bef2465_200x200.png?1601028498829" class="image-center" id="header-img">
<nav id="nav-bar" class="center topnav">
<a href="#about" class="nav-link" id="nav-link1">About us</a>
<a href="#product" class="nav-link" id="nav-link2">The Product</a>
<a href="#timeline" class="nav-link" id="nav-link3">Our Progress & Timeline</a>
<a href="#contact" class="nav-link" id="nav-link4">Contact Us</a>
</nav>
</header>
<br><br><br>
<h3>hi</h3>最佳答案
考虑到 nav 元素是父容器这一事实，我同意 @abney317 关于在 .center 类上使用显示 Flex 的观点。此外，我想指出一些改进代码的建议。
- HTML 缺少一些对于正确的标记非常重要的标记。
DOM 结构，例如
body和head。 - 对脚本和 CSS 样式表的引用(链接)应位于
head标记内。 - 请记住，CSS 表示层叠样式表，因此顺序 风格规则很重要。您应该将 HTML 文档的样式设置为 从上到下降序排列。
- 在标题之后，最好将下一个标题括起来
容器标签内的内容 block :
div、section、文章，旁白。
出于说明目的，我对您的代码进行了一些修改。
继续努力，永不停止学习!
//HTML
<html>
<head>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<header id="header">
<img src="https://www.freelogodesign.org/file/app/client/thumb/57b26682-f831-4123-9003-93366bef2465_200x200.png?1601028498829" class="image-center" id="header-img">
<nav id="nav-bar" class="center topnav">
<a href="#about" class="nav-link" id="nav-link1">About us</a>
<a href="#product" class="nav-link" id="nav-link2">The Product</a>
<a href="#timeline" class="nav-link" id="nav-link3">Our Progress & Timeline</a>
<a href="#contact" class="nav-link" id="nav-link4">Contact Us</a>
</nav>
</header>
<div>
<h3>hi</h3>
</div>
</body>
</html>
//CSS
html {
background: url("https://www.toptal.com/designers/subtlepatterns/patterns/ep_naturalwhite.png");
}
body {
position: relative;
text-align: center;
text-justify: center;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #1e1e24;
}
body::-webkit-scrollbar-thumb {
background: #6649b8;
}
h3 {
font-family: calibri;
font-size: 20px;
}
.image-center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
#header-img {
border-radius: 15%;
object-fit: cover;
height:200px;
}
.center {
display: flex;
background: rgb(47, 204, 118);
margin-left: auto;
margin-right: auto;
width:40%;
}
.topnav a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 17px;
margin:0 auto;
}
.nav-link {
font-family: 'Roboto', sans-serif;
font-weight: bold;
font-size: 20px;
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.nav-link:hover {
color: rgb(47, 204, 118);
background: white;
transition: 0.5s;
}
关于html - 除非我做了很多换行，否则文本会卡在导航栏旁边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64245418/