如何对齐菜单的列表元素（ul菜单）？

Question

我有一个列表菜单，由于

，我显示了该列表中的所有元素

.navigator ul
{
display: inline-block;
width: 100%;
}

.navigator li {
    margin:4px 50px -10px 0px;
    float:left;
    list-style:none;
    font-size:17px;
}

.navigator {
    width:100%;
    box-shadow:0px 1px 1px rgba(0,0,0,0.15);
    background:#3298BA;
}

但是我希望这个列表的一些元素在左边对齐，其他元素以中心为中心，最后一个元素在右边。

而且我不知道我可以设置哪些CSS属性来获取此属性。

这是我目前的菜单：

此菜单的代码：

<nav class="navigator">
  <ul class="active">
    <li class="current-item"><a href="#">Characters</a></li>
    <li><a href="#">Skills</a></li>
    <li><a href="#">Items</a></li>
    <li><a href="#">Stats</a></li>
    <li><a href="#">My account</a></li>
    <li><a href="#" class="glyphicon glyphicon-log-out"></a></li>
  </ul>
</nav>

我的目标是让角色与左边对齐;技能，项目和统计数据到中心，最后我的帐户和glyphicon与右边对齐。

Answer 1

为每个li设置宽度（例如宽度：16％）并添加以下CSS

.navigator li:first-child {
    text-align: left;
}
.navigator li:last-child {
    text-align: right;
}

不要忘记将“.navgator li”CSS中的默认对齐设置为“中心”

Answer 2

＆＃13;

＆＃13;

.navigator ul
{
display: block;
width: 100%;
  text-align:center;
}

.navigator li {
    margin:4px 10px 0px 0px;
    float:none;
    list-style:none;
    font-size:17px;
  display:inline-block;
    width: 14%;
}

.navigator {
    width:100%;
    box-shadow:0px 1px 1px rgba(0,0,0,0.15);
    background:#3298BA;
}
.navigator li:first-child{
text-align:left;
}
.navigator li:last-child{
text-align:right;
}

＆＃13;

<nav class="navigator">
  <ul class="active">
    <li class="current-item"><a href="#">Characters</a></li>
    <li><a href="#">Skills</a></li>
    <li><a href="#">Items</a></li>
    <li><a href="#">Stats</a></li>
    <li><a href="#">My account</a></li>
    <li><a href="#" class="glyphicon glyphicon-log-out">1</a></li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;