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/

你漂浮了你的左边，所以我把它换成了 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%你的小提琴似乎很好。

这里是demo

一条线上有两个元素，但没有居中

2 个答案: