小编Dav*_*kes的帖子

在弹性框中左对齐,居中和向右对齐元素

我正在尝试使用flexbox创建这个顶部标题.

头

基本上我想将<div class="header-title">(机构机构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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

演示 …

html css css3 centering flexbox

22
推荐指数
2
解决办法
2万
查看次数

标签 统计

centering ×1

css ×1

css3 ×1

flexbox ×1

html ×1