使用输入+按钮高度均衡自举分页高度

Question

我已经使用“跳转到页面”选项扩展了分页（Bootstrap-styled），但一直在努力使分页器列表高度与输入和提交按钮的高度相匹配。记不起我到目前为止所尝试的一切，但这里是最新的代码，它最接近我想要的。列表高度仍然是29px，输入高度（.input-sm）是30px，按钮高度（btn-sm）是32px。

HTML code：

<ul class="pagination">
    <li><a href="?&page=Batch">First</a></li>
    <li><a href="?pn=251&perpage=50&page=Batch">Prev</a></li>
    <li><a href="?pn=245&perpage=50&page=Batch">245</a></li>
    ....
    <li><a href="?pn=253&perpage=50&page=Batch">Next</a></li>
    <li><a href="?pn=1693&perpage=50&page=Batch">Last</a></li>
    <form method="get" class="form-horizontal" action="">
        <div class="form-group input-group col-md-2">
            <input type="hidden" name="page" value="Batch" />
            <input type="hidden" name="perpage" value="50" />
            <input required type="text" class="form-control input-sm" name="pn" size="4" placeholder="Page #">
            <span class="input-group-btn"><button class="btn btn-default btn-sm" type="button">Go!</button></span>
        </div>
    </form>
</ul>

额外的CSS（与引导程序相同，仅适用于input和button）：

.pagination input,
.pagination button {
    margin-left: -1px;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 6px 12px;
}

https://jsfiddle.net/dsd2zd6c/

编辑：问题已解决。 Culprit是我之前在自定义样式文件中使用的一些CSS样式。 我的身体{font：11px / 16px Verdana，Arial，Helvetica，sans-serif;}然后在我的自定义样式文件中的分页代码上方{font-size：11px;}。删除它们，列表项和输入/按钮高度现在相等。

Answer 1

通过从输入和按钮中删除尺寸类别（input-sm，btn-sm），您的填充设置就会启动并完成工作。

 <input required type="text" class="form-control" name="pn" size="4" placeholder="Page #">
 <span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span>

这是一个更新的JSfiddle：https://jsfiddle.net/L7tq5nzd/