html - Twitter bootstrap html 选择内部分页组件偏移且未对齐

Question

当我尝试在分页组件内使用 html 选择时，html 选择发生偏移并且未正确对齐。为了简洁起见，我只包含了分页的前半部分以及其中的 html 选择。它应该可以说明问题，您可以查看 JSFiddle here .

<div class="pagination pagination-large pagination-centered">
     <ul>
       <li><a class="first_record" rel="tooltip" data-original-title="First record" href="#">First</a></li>
       <li><a class="previous_record" rel="tooltip" data-original-title="Previous" href="#">Previous</a></li>
       <li><span>Display <select class="input-mini page_size">
      <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
       </li>
    </ul>
   </div>

如有任何帮助，我们将不胜感激。

Answer 1

试试下面的 CSS:

.pagination select {
  height: 30px;
  margin-top: -7px;
  margin-bottom: -5px;
}

或者，或者:

.pagination select {
  height: 2em;
  margin-top: -0.5em;
  margin-bottom: -0.4em;
}