Question

When trying to place both an <input> and a <select> box and separating them with a grey line in between, it shows just how I want it.

The problem is that the two elements does not center like the rest. They stay all the way to the left. Does not the text-align:center; apply for these?

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

Here ya go:
http://jsfiddle.net/YPyRF/36/

You were floating your LI’s left, so I replaced it with
display:inline-block; and I put text-align:center; on the 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;
}