Question

我想知道如何在导航栏中创建均匀的间距。我希望在“历史，词源和关于”之间保持均匀的间距。我也希望该部分保留在右侧，而柴犬保留在左侧。我已附上我目前的照片，并附上我想要的照片。

谢谢！

.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父对象或flex容器的宽度在这种情况下，由父级定义的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>

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

1 个答案: