对齐左边中间和右边

Question

我想设置一个导航栏，而不使用CSS中的引导导航栏，我有它在MD中显示时工作，但我想要在容器中显示3个li时，第一个完全在左边，第二个完全居中，第三个完全在右边。我有它的工作，但不能让第二个或中间的人在中心，如果这是有道理的。我使用的代码是：

#nav-xs { 
 
    display: inline-block; 
 
    text-align: center; 
 
    border: 0; 
 
    list-style-type: none; 
 
    height: 72px; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #00a4ff; 
 
    float: left; 
 
} 
 

 
#nav-xs-left { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    float: left; 
 
    text-align: left; 
 
} 
 

 
#nav-xs-right { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    float: right; 
 
    text-align: center; 
 
} 
 

 
#nav-xs-center { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
#xs-nav { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="container-fluid f2p-nav-xs hidden-md hidden-lg hidden-sm"> 
 
    <ul id="xs-nav"> 
 
    <li id="nav-xs-left"><a href='login.php' class='btn btn-login' role='button'>Login </a></li> 
 
    <li id="nav-xs-center"><a href='login.php' class='btn btn-login' role='button'>Login </a></li> 
 
    <li id="nav-xs-right"><a href='login.php' class='btn btn-login' role='button'>Login </a></li> 
 
    </ul> 
 
</div>

三江源任何帮助，我得到

Answer 1

您可以在ul使用display: flex;，与justify-content: space-between;：

#nav-xs { 
 
    display: inline-block; 
 
    text-align: center; 
 
    border: 0; 
 
    list-style-type: none; 
 
    height: 72px; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #00a4ff; 
 
    float: left; 
 
} 
 

 
#nav-xs-left { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    float: left; 
 
    text-align: left; 
 
} 
 

 
#nav-xs-right { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    float: right; 
 
    text-align: center; 
 
} 
 

 
#nav-xs-center { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
#xs-nav { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="container-fluid f2p-nav-xs hidden-md hidden-lg hidden-sm"> 
 
    <ul id="xs-nav"> 
 
    <li id="nav-xs-left"><a href='login.php' class='btn btn-login' role='button'>Login </a></li> 
 
    <li id="nav-xs-center"><a href='login.php' class='btn btn-login' role='button'>Login </a></li> 
 
    <li id="nav-xs-right"><a href='login.php' class='btn btn-login' role='button'>Login </a></li> 
 
    </ul> 
 
</div>