我希望我的导航栏出现在我的标志的对面



我希望我的标题显示为这样,一边是徽标,另一边是导航栏:图像

它目前显示的标志和导航栏叠放在一起,位于左侧:图像

我试着使用柔性显示器,并证明内容的合理性,但没有成功。有什么想法吗?这是电笔:Why do I need to have code to link a codepen lolhttps://codepen.io/jalal_b/pen/ZEpmzzX

这是您需要添加到样式中的内容:

#header { display: flex; }
#nav-bar { flex: 1; }
#nav-bar ul { display: block }
#nav-bar ul li { 
display: inline-block;
margin: 0 2em;
}

你可能需要适应你的设计。

如果你想了解更多,下面是一篇关于CSS中flex-框的文章:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

祝你好运!✌️

我将您的代码复制到下面的一个片段中。

我只是简单地将此代码添加到您的CSS:中

#header {
display: flex;
flex-direction: row;
}

然后在列表项上设置display: inline

li {
list-style-type: none;
display: inline;
}

您可能需要稍微调整一下布局,以使列表项的空间更大一些。

@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
#header {
display: flex;
flex-direction: row;
}
#header-img {
margin-left: 40px;
margin-right: auto;
display: block;
height: 45px;
width: auto;
}
.nav-link {
color: #BEB7A4;
text-decoration: none;
font-family: "Montserrat";
}
li {
list-style-type: none;
display: inline;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img 
id="header-img"
src="data:image/png;base64,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"
alt="sporks logo"/>
</div>

<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#about">About</a></li>
<li><a class="nav-link" href="#how-to-use">How To Use</a></li>
<li><a class="nav-link" href="#where-to-buy">Where To Buy</a></li>
</ul>
</nav>
</header>

最新更新