Twitter bootstrap html select 내부 페이지 매김 컴포넌트가 오프셋되고 정렬되지 않았습니다.

Question

페이지 매김 컴포넌트의 html select 내부를 사용하려고하면 html select가 오프셋되고 올바르게 정렬되지 않습니다. 나는 간결함을 목적으로 그것의 내부에 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> 

어떤 도움을 주시면 감사하겠습니다. 대안

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

또는 :

Answer 1

은 다음과 CSS를 시도

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

Answer 2

을 라벨없이 그것을 할 당신 수 있다면, 여기에 내가 사용하여 종료 된 CSS입니다.

CSS

.pagination select { 
    background-color: #ffffff; 
    border: 1px solid #dddddd; 
    color: #337ab7; 
    float: left; 
    line-height: 1.42857; 
    margin-left: -1px; 
    padding: 6px 12px; 
    position: relative; 
    text-align: center; 
} 
.pagination > li:first-child > select { 
    border-bottom-left-radius: 4px; 
    border-top-left-radius: 4px; 
    margin-left: 0; 
} 
.pagination > li:last-child > select { 
    border-bottom-right-radius: 4px; 
    border-top-right-radius: 4px; 
} 
.pagination > li > select:hover, 
.pagination > li > select:focus { 
    background-color: #eeeeee; 
    border-color: #dddddd; 
    color: #23527c; 
} 

.pagination-lg > li > select { 
    font-size: 18px; 
    padding: 10px 16px; 
} 
.pagination-lg > li:first-child > select { 
    border-bottom-left-radius: 6px; 
    border-top-left-radius: 6px; 
} 
.pagination-lg > li:last-child > select { 
    border-bottom-right-radius: 6px; 
    border-top-right-radius: 6px; 
} 

.pagination-sm > li > select { 
    font-size: 12px; 
    padding: 5px 10px; 
} 
.pagination-sm > li:first-child > select { 
    border-bottom-left-radius: 3px; 
    border-top-left-radius: 3px; 
} 
.pagination-sm > li:last-child > select { 
    border-bottom-right-radius: 3px; 
    border-top-right-radius: 3px; 
} 

HTML

<div class="container"><nav> 
    <ul class="pagination"> 
    <li> 
     <a href="#" aria-label="Previous"> 
     <span aria-hidden="true">«</span> 
     </a> 
    </li> 
    <li><select onchange="if (this.value) window.location.href=this.value"> 
     <option value="?page=1">1</option> 
     <option value="?page=2">2</option> 
     <option value="?page=3">3</option> 
     </select></li> 
    <li> 
     <a href="#" aria-label="Next"> 
     <span aria-hidden="true">»</span> 
     </a> 
    </li> 
    </ul> 
</nav> 
</div> 

예 : http://www.bootply.com/KVb2hwLs57