css - 在分页中包含选择 - bootstrap

Question

我正在尝试在 Bootstrap 分页中包含一个下拉菜单。

http://jsfiddle.net/Z4dsD/6/

1. 下拉菜单未正确对齐。
2. Next 和 Prev 按钮之间有间隙。

如何修复。

HTML:

<ul class="pagination custom-pagination">
    <li><a href="#">First</a></li>
    <li><a href="#">Prev</a></li>
    <li>
        <select class="form-control">
            <option>1</option>
            <option>2</option>
        </select>
    </li>
    <li style="display:inline-block;"><a href="#">Next</a></li>
    <li style="display:inline-block;"><a href="#">Last</a></li>
</ul>

CSS:

.custom-pagination select {
    display:inline-block;
    width:85px;
    border-radius:0px;
}

Answer 1

只需将以下内容添加到您选择的 CSS 中:

vertical-align: top;

这会将 select 对齐到顶层。

您还需要添加 margin-left: -1px; 以使其与其他元素正确对齐。

同时从最后 2 个 li 元素中删除 display: inline-block 样式，并将 select 的 float 设置为左侧。

工作 jsfiddle:Select jsfidle