css - 如何在导航栏中创建均匀间距

Question

我想知道如何在我的导航栏中创建均匀的间距。我希望“历史、词源和关于”之间的间距均匀。我还希望那部分留在右边，而柴犬留在左边。我附上了一张我目前拥有的照片以及一张我想要的照片。

谢谢!

What I want

What I have

.navbar{
    font-size: 13pt;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    height: 70px;
    align-items: center;
    position: fixed;
}

.main-nav{
    list-style-type: none;
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
}

.home, 
.nav-links{
    text-decoration: none;
    color:#212020;
}

.main-nav li{
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    justify-content: space-between;
    font-size: 13pt;
}

.home{
    display: inline-block;
    font-size: 22px;
    margin-left: 10px;
}

        <nav class="navbar">
            <a href="index.html" class="home">SHIBA INU</a>
            <ul class="main-nav">
                <li>
                    <a href="index.html" class="nav-links" >ABOUT</a>
                </li>
                <li>
                    <a href="#" class="nav-links" >ETYMOLOGY</a>
                </li>
                <li>
                    <a href="#" class="nav-links" >HISTORY</a>
                </li>
            </ul>
        </nav>

Answer 1

总结:

• 确保你的 flex parent 或 flex container 有一个宽度 在这种情况下，父项的定义 100% 表示整个窗口为 这里没有其他家长。

• 另一方面，列表元素之间的空间可以做到 有多种方法，但我认为排除最后一个的边距 一个应该适用于您的用例。

.navbar{
    font-size: 13pt;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    height: 70px;
    align-items: center;
    position: fixed;
    width: 100%;
}

.main-nav{
    list-style-type: none;
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
    flex-grow: 1;
    align-items: justify-content;
}

.home, 
.nav-links{
    text-decoration: none;
    color:#212020;
}

.main-nav li{
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    justify-content: space-between;
    font-size: 13pt;
}

   .main-nav li:not(:last-child) {
   margin-right: 10px;
   }

.home{
    display: inline-block;
    font-size: 22px;
    margin-left: 10px;
}

        <nav class="navbar">
            <a href="index.html" class="home">SHIBA INU</a>
            <ul class="main-nav">
                <li>
                    <a href="index.html" class="nav-links" >ABOUT</a>
                </li>
                <li>
                    <a href="#" class="nav-links" >ETYMOLOGY</a>
                </li>
                <li>
                    <a href="#" class="nav-links" >HISTORY</a>
                </li>
            </ul>
        </nav>