如何在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/

Tried adding margin:auto on #l2 , but it doesn't work. Also tried text-align:center on ul, and on first li float:left , but second li ends up not in the center, but a bit to the right.

How can align second li (blue in my example) center, and first li (red in my example) left?

Answer 1

You can use positioning to move the red list item to the left, and text-align:center on the <ul> to center the blue list item:

 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>