html - 如何在 ul 元素中将第一个 li 左对齐和第二个 li 居中对齐

Question

HTML:

<ul id="wr">
    <li id="l1"></li> // align left
    <li id="l2"></li> //align center
</ul>

CSS:

ul {background-color:yellow;widht:100%; height:25px; margin:0px; padding:0px;}
ul li {
  display: inline-block;
  list-style: none;
  width:200px;height:20px;
}
#l1 {background-color:red;}
#l2 {background-color:blue; margin:auto;}

http://jsfiddle.net/edo0ujnb/1/

尝试在 #l2 上添加 margin:auto，但它不起作用。还在 ul 和第一个 li float:left 上尝试了 text-align:center，但是第二个 li 结束了不在中间，而是向右一点。

如何将第二个 li(在我的示例中为蓝色)居中，第一个 li(在我的示例中为红色)居中？

Answer 1

可以使用定位将红色列表项向左移动，text-align:center在 <ul> 上使蓝色列表项居中:

ul {
    background-color:yellow;
    width:100%;
    height:25px;
    margin:0px;
    padding:0px;
    text-align:center;
    position:relative;
}
ul li {
    display: inline-block;
    list-style: none;
    width:200px;
    height:20px;
}
#l1 {
    background-color:red;
    position:absolute;
    left:0;
}
#l2 {
    background-color:blue;
    margin:auto;
}

<ul>
    <li id="l1"></li>
    <li id="l2"></li>
</ul>