css - 一行中的两个元素，但不居中

Question

当试图同时放置一个<input>和一个<select>盒子并在它们之间用一条灰线分隔它们时，它显示了我想要的方式。

问题是这两个元素不像其他元素那样居中。他们一直在左边。不text-align:center;申请这些吗？

CSS

li{
float: left;
border-left: 2px solid #999999;
padding: 0 10px;
list-style-type: none;
}
li.f{
border: 0;
padding: 0 10px 0 0;
}

HTML

<li class="f">
<select><option value="things">things</option></select>
</li>
<li>
<input type="checkbox">Check me
</li>

Answer 1

来吧：http: //jsfiddle.net/YPyRF/36/

你在浮动你的 LI 的左边，所以我把它换成
display:inline-block;了text-align:center;UL。

CSS

li{
    display:inline-block;
    border-left: 2px solid #999999;
    padding: 0 10px;
    list-style-type: none;
}
li.f{
    border: 0;
    padding: 0 10px 0 0;
}
ul {
    text-align:center;
}

Answer 2

你可以给margin-left: 40%;你的li.f，这个值你可以根据两个li 的宽度来调整它，这样它就可以居中，这40%对你的小提琴来说似乎很好。

这里是演示