时间戳

首页 > 解决方案 > 一个 div 正确，其他以 flex 为中心

css - 一个 div 正确，其他以 flex 为中心

问题描述

我有一个看起来像这样的菜单

<div class="page">
  <nav class="page__menu menu">
    <ul class="menu__list r-list">
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Option1</a></li>
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Option2</a></li>
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Option3</a></li>
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Option4</a></li>
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Logout</a></li>
    </ul>
  </nav>
  </div>

我希望前 4 个选项居中，最后一个选项位于导航栏的右侧。我尝试将 'margin-right:auto' 和 'margin-left:auto' 应用于最终 div，但它仍然无法正常工作。有没有办法在不创建 3 个不同的弹性框的情况下做到这一点，左边一个空白？

标签： cssflexbox

解决方案

margin-left: auto应该管用。尝试将它放在第一个和最后一个列表项上，如下所示：

.menu__list {
    display: flex;
}
.menu__group {
    list-style-type: none;
}
.menu__group:first-of-type,
.menu__group:last-of-type {
    margin-left: auto;
}

推荐阅读