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

您可以使用定位将红色列表项向左移动，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>

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

how to align first li left and second li center in the ul element

html

css

alignment