如何对齐菜单的列表元素（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

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

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

不要忘了将“ .navgator li” CSS中的默认对齐方式设置为“ center”

Answer 2

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