如何在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上的text-align:center ，以及第一個li float:left ，但是第二個li結尾不是在中心，而是在右邊。

如何對齊第二個li （在我的示例中為藍色）中心和第一個li （在我的示例中為紅色）中心？

Answer 1

您可以使用定位將紅色列表項向左移動，並在<ul>上將text-align:center置於藍色列表項的中心：

 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>