How to align list element of a menu (ul menu)? - html

Question

I have a list menu and I display all the elements in that list thanks to
.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;
}
But I want to have some elements of this list aligned to the left, others centered to the center and the last elements to the right.
And I don't know which CSS properties I can set to get this.
This is my current menu :
And the code of this menu :
<nav class="navigator">
<ul class="active">
<li class="current-item">Characters</li>
<li>Skills</li>
<li>Items</li>
<li>Stats</li>
<li>My account</li>
<li></li>
</ul>
</nav>
My objective is to have Characters aligned to the left ; Skills, Items and Stats to the center and finally My account and the glyphicon aligned to the right.

Answer 1

Set a width for each li (e.g. width: 16%) and add the following CSS
.navigator li:first-child {
text-align: left;
}
.navigator li:last-child {
text-align: right;
}
Don't forget to set the default alignment in your ".navgator li" CSS to "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">Characters</li>
<li>Skills</li>
<li>Items</li>
<li>Stats</li>
<li>My account</li>
<li>1</li>
</ul>
</nav>