如何对齐菜单（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>

我的目标是让角色左对齐；技能、物品和统计信息位于中心，最后我的帐户和字形图标位于右侧。

Answer 1

.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;
}

<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>

Answer 2

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

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

不要忘记将

.navgator li

CSS 中的默认对齐方式设置为

center