我有一个列表菜单,并且我显示了该列表中的所有元素,这要归功于
.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>
我的目标是让角色左对齐;技能、物品和统计信息位于中心,最后我的帐户和字形图标位于右侧。
.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>
为每个li设置一个宽度(例如宽度:16%)并添加以下CSS
.navigator li:first-child {
text-align: left;
}
.navigator li:last-child {
text-align: right;
}
不要忘记将
.navgator li
CSS 中的默认对齐方式设置为 center