ラベルと入力テキストをインラインで作成する方法

Question

私は自分のテーブルにページングをしています。

入力テキストとインラインで「30」というテキストのラベルが必要です。

どうすればいいですか？

https://jsfiddle.net/uwom05mc/2/

// MARKUP

<nav> 
     <ul class="pagination" style="margin: 0px !important;"> 
     <li><a href >First</a> 
     </li><li><a href>&lt;</a> 
     </li> 
     <li> 
      <a> 
      <input type="text" class="select-page form-control" id="pagenav" class="form-control"> 
      <label>of 30</label> 
      </a> 
     </li> 
     <li><a href>&gt;</a> 
     </li><li><a href>Last</a></li> 
     </ul> 
</nav> 

Answer 1

持つために、ここで

はフィドルのリンクです入力の隣にテキストが表示されますO含む要素の高さや余白を調整する必要があります。

#pagenav { 
    display: inline-block; 
} 

.pagination>li>a { 
    height: 34px; 
} 

.pagination li a input { 
    height: 26px; 
    margin-top: -7px; 
} 

私はこのhereを展示更新フィドルを作成しました。

希望すると便利です。 :)

Answer 2

試してみてください：#pagenavにdisplay: inline-blockの設定に加えて

#pagenav { 
    display: inline-block; 
}