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/

尝试在margin:auto上添加#l2，但它不起作用。还尝试了text-align:center on ul和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中心

1 个答案: