所以我希望我的导航栏是这样的工作和新闻元素在左侧对齐,约克标志文本在中间,关于和联系人元素在右侧。到目前为止,我已经设法使它,使左右工作,但由于某种原因,我似乎找不到我的约克标志坚持到左侧。
我试着改变我给flex属性的类,我也试着改变我设置html的方式。
body {
font-family: europa, sans-serif;
padding-left: 3vw;
padding-right: 3vw;
}
header {
display: flex;
}
nav {
display: flex;
}
.nav-left-press,
p {
color: #b3b3b3;
margin-left: 1vw;
}
.nav-right-about,
p {
color: #b3b3b3;
}
.nav-right-contact,
p {
color: #b3b3b3;
}
.nav-left {
text-align: left;
}
.nav-right {
text-align: right;
position: absolute;
right: 3vw;
}
.nav-center-logo {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}
<header id="header">
<nav class="nav-left">
<div class="nav-left-work">Work</div>
<div class="nav-left-press">Press</div>
</nav>
<div class="nav-center-logo">YORK</div>
<nav class="nav-right">
<div class="nav-right-about">About</div>
<div class="nav-right-contact">Contact</div>
</nav>
</header>
3条答案
按热度按时间vxbzzdmp1#
我添加了一个理由内容:添加到页眉中。
从你的导航右侧移除绝对位置。
希望这个有用。
6ju8rftf2#
我做了两个版本,以您的css,删除两个声明,这是打破了您的位置在
.nav-right {}
声明和添加justify-content: space-between;
到header {}
声明,让我知道如果是为您工作了。hmae6n7t3#
你需要把
width: 100%;
添加到.nav-center-logo
,但是这样做不会使logo完美地居中,还要把position: absolute;
添加到.nav-center-logo
,把position: relative;
添加到父元素(例如header
)。请参见下面的片段。