均化引導分頁高度與輸入+按鍵高度

我有一個「跳躍到頁面」選項擴大了分頁（引導風格），但一直在努力獲得分頁程序列表高度匹配的輸入和提交按鈕。到目前爲止，我記不清所有嘗試過的東西，但這是最新的代碼，與我想要的最接近。不過，列表高度是29px，輸入高度（.input-sm）是30px，按鈕高度（btn-sm）是32px。

HTML代碼：

<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）：

https://jsfiddle.net/dsd2zd6c/

編輯：問題解決了。 罪魁禍首是一些在我的自定義樣式文件中出現的CSS樣式。我的自定義樣式文件中的分頁代碼上方有{font：11px/16px Verdana，Arial，Helvetica，sans-serif;}，然後是一個{font-size：11px;}。刪除它們，列表項和輸入/按鈕高度現在相等。

來源

2017-07-31 cheeseus

通過從您輸入的按鈕和按鈕中刪除尺寸類別（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/

來源

2017-07-31 17:51:01 Laszlo

不，不，對不起。看小提琴 - 它和我的完全一樣。我試過了。刪除'input-sm'和'btn-sm'類的唯一辦法是均衡輸入和按鈕高度（在34px處），但它們現在比分頁（29px）大得多。 – cheeseus

這真的很奇怪：我只是通過刪除兩個類來更新您提示的小提琴，現在分頁和輸入和按鈕的高度相同。我有完全相同的代碼（html + css），我已經清除了緩存，但是我無法得到相同的結果。和你的小提琴一樣。 – cheeseus

我發現了這個問題。它在其他一些CSS中受到干擾。我在自定義樣式文件中的分頁代碼上方有'body {font：11px/16px Verdana，Arial，Helvetica，sans-serif;}'，然後是'{font-size：11px;}'。刪除它們，列表項和輸入/按鈕高度現在相等。 – cheeseus

均化引導分頁高度與輸入+按鍵高度

回答

相關問題