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;
}