html - 如何使第二个列表项元素居中？

Question

我正在尝试学习如何使用 css/scss 从网上找到的图像中制作滑动菜单 Movies by Artem Borodynya

到目前为止，我已经设法拥有:

<ul class="navbar">
   <li>Menu</li>
   <li class="selected">Actualities</li>
   <li>Substitutions</li>
   <li>Canteen</li>
   <li>Calendar</li>
   <li>Files</li>
</ul>

使用一些display: flex 魔法，我设法让它大致居中，但并不完美。

问题来了，我应该如何正确地做菜单呢？ flex 是正确的使用方式吗？如何让第二个 li 元素居中并让其他元素围绕它 float ？

我正在使用它作为实验，我想了解它应该如何工作。

编辑:

我的CSS:

.navbar {
    @include flexbox();

    flex-flow: row nowrap;
    align-items: flex-end;

    padding: 0;
    margin: 0;

    li {
        list-style: none;
        font-family: 'Roboto Black', sans-serif;
        padding-right: 3rem;

        &.selected {
            font-size: 3em;
            color: #798AC5;
        }

        &:not(.selected) {
            font-size: 2em;
            color: #D9D9DA;
        }
    }
}

Answer 1

如果没有发布 CSS，很难回答您的问题。这是我创建的东西:

<ul class="navbar">
   <li>Menu</li>
   <li class="selected">Actualities</li>
   <li>Substitutions</li>
   <li>Canteen</li>
   <li>Calendar</li>
   <li>Files</li>
</ul>

<style>
    ul {
        display: flex;
        justify-content: center;
        list-style: none; /* Remove browser defaults */
        padding-left: 0;  /* Remove browser defaults */
    }

    ul.navbar li:not(:last-of-type) {
        margin-right: 10px;
    }

    li.selected {
        background-color: rgb(204, 255, 0);
    }
</style>

在这里测试:https://jsfiddle.net/jwde4ufa/1/