我正在尝试使用 flexbox 创建这个顶部标题。
基本上,我想将 <div class="header-title">
(Institution institution 1)与您看到的其他 3 个元素放在一起。 (Institutioner、Ledere 和 Log ud)就像您在图片上看到的那样。
.nav {
background: #e1e1e1;
}
ol, ul {
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.header-title {
justify-content: center;
align-self: center;
display: flex;
}
.nav ul li.logout {
margin-left: auto;
}
.nav ul li a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}
<div class="nav mobilenav">
<div class="header-title">
Institution institution 1
</div>
<ul>
<li><a href="/institutions/">Institutioner</a></li>
<li>
<a href="/leaders/">Ledere</a>
</li>
<li class="logout">
<a class="button-dark" href="/user/logout">Log ud</a>
</li>
</ul>
</div>
原文由 Dave Mikes 发布,翻译遵循 CC BY-SA 4.0 许可协议
使用嵌套的弹性容器和
flex-grow: 1
。这允许您在导航栏上创建三个等宽的部分。
然后每个部分成为一个(嵌套的)弹性容器,它允许您使用弹性属性垂直和水平对齐链接。
现在左右项目被固定到容器的边缘,中间项目完全居中(即使左右项目的宽度不同)。
jsFiddle