title: Equalize bootstrap pagination height with input+button height
body: <p><a href="https://i.stack.imgur.com/YNHG9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YNHG9.png" alt="pagination height"></a></p>
  
  <p>I have expanded the pagination (Bootstrap-styled) with a "jump-to-page" option but have been struggling to get the paginator list height to match that of the input and the submit button. Can't remember everything I've tried so far but here's the latest code, which is closest to what I want. Still, list height is 29px, input height (<code>.input-sm</code>) is 30px, and the button height (<code>btn-sm</code>) is 32px.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;ul class="pagination"&gt;
      &lt;li&gt;&lt;a href="?&amp;page=Batch"&gt;First&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="?pn=251&amp;perpage=50&amp;page=Batch"&gt;Prev&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="?pn=245&amp;perpage=50&amp;page=Batch"&gt;245&lt;/a&gt;&lt;/li&gt;
      ....
      &lt;li&gt;&lt;a href="?pn=253&amp;perpage=50&amp;page=Batch"&gt;Next&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="?pn=1693&amp;perpage=50&amp;page=Batch"&gt;Last&lt;/a&gt;&lt;/li&gt;
      &lt;form method="get" class="form-horizontal" action=""&gt;
          &lt;div class="form-group input-group col-md-2"&gt;
              &lt;input type="hidden" name="page" value="Batch" /&gt;
              &lt;input type="hidden" name="perpage" value="50" /&gt;
              &lt;input required type="text" class="form-control input-sm" name="pn" size="4" placeholder="Page #"&gt;
              &lt;span class="input-group-btn"&gt;&lt;button class="btn btn-default btn-sm" type="button"&gt;Go!&lt;/button&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The extra CSS (the same as the bootstrap, only applied to <code>input</code> and <code>button</code>):</p>
  
  <pre><code>.pagination input,
  .pagination button {
      margin-left: -1px;
      color: #337ab7;
      text-decoration: none;
      background-color: #fff;
      border: 1px solid #ddd;
      padding: 6px 12px;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/dsd2zd6c/" rel="nofollow noreferrer">https://jsfiddle.net/dsd2zd6c/</a></p>
  
  <p><strong>EDIT: PROBLEM SOLVED.</strong>
  Culprit was some CSS styling that came before in my custom-styles file.
  I had body {font: 11px/16px Verdana, Arial, Helvetica, sans-serif;} and then a {font-size:11px;} above the pagination code in my custom-styles file. Removed them and the list items and input/button height is now equal.</p>