除非我多次换行，否则文本会粘在导航栏旁边

当我尝试将文本放在导航栏后时，它会卡在同一行。目前正在尝试做freecodecamp响应式网页设计认证，所以有点麻烦，我很感激我的代码可能有点乱。这还是个新手，我不确定一些代码是如何工作的，比如把我的导航栏定位为一个块，我觉得这可能会引起问题。如有任何建议，我们将不胜感激。

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类上使用display Flex。此外，我想指出一些改进代码的建议。

HTML缺少一些对正确的DOM结构，如body和head
对脚本和CSS样式表的引用(链接(应该在head标记中
记住CSS的意思是级联样式表，因此顺序风格规则的重要性。您应该在中设置HTML文档的样式从上到下的降序
在头球之后，结束下一个球总是一个很好的练习容器标签内的内容块：div、section，article、aside

为了便于说明，我对您的代码进行了一些修改。

继续努力，永不停止学习！

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

发生这种情况是因为您使用了float。

有三种解决方案：

在导航中使用溢出自动

.center{显示：块；左边距：自动；右侧边距：自动；宽度：40%；溢出：自动；}

使用display flex如果它满足您的要求，您可以将导航的显示更改为flex

.center{显示：flex；左边距：自动；右侧边距：自动；宽度：40%；}

在页眉和文本之间添加一个空白div

<div style="clear: both"></div>

float: left和width: 40%导致了您看到的问题。

您可以使用更改.center类来使用display: flex。

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: flex;
justify-content: center;
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 17px;
}
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>

<h3>hi</h3>

相关内容

最新更新

热门标签：