두 개의 부동 div에서 기준선을 맞추는 방법

Question

호출기로 정렬 된 CSS를 가져 오려고합니다. div를 페이지 번호로 왼쪽으로 띄운 다음 페이지 당 몇 개의 항목을 표시할지 설정하는 컨트롤이 포함 된 작은 폼을 오른쪽으로 띄우면됩니다.

페이지가 전체 크기 일 때 div는 너무 멀리 떨어져있어 별 문제가되지 않지만 페이지 크기가 조정되어 div가 거의 만져지면 눈에 띄게됩니다.

두 div간에 텍스트가 세로로 정렬되도록 CSS 또는 HTML을 수정하려면 어떻게해야합니까?

는 또한, 텍스트가 꽤 각 페이지 번호가 중앙에 있지된다

이처럼 현재 모습입니다. 어떻게 작동 시키나요?

관련 CSS :

ol.mini-form { 
    margin: 0; 
    padding: 0; 
} 

ol.mini-form li { 
    display: inline; 
} 

ol.pager-pages { 
    margin: 0.5em 0; 
    padding: 0.5em 0; 
    float: left; 
} 

ol.pager-pages li { 
    padding: 0.4em; 
    margin: 0.1em; 
    border: 1px solid #ccc; 
    text-align: center; 
} 

ol.pager-result { 
    padding: 0.4em; 
    float: right; 
} 

HTML :

<div> 
    <ol class="mini-form pager-pages"> 
     <li> 
      <a href="...">1</a> 
     </li>  
     <li> 
      <a href="...">2</a> 
     </li> 
     <li> 
      <a href="...">3</a> 
     </li> 
    </ol> 

    <form action="..." method="get">   
     <ol class="mini-form pager-result"> 
     <li> 
      <select name="PageSize"> 
      <option value="5">5</option> 
      <option selected="selected" value="10">10</option>  
      <option value="20">20</option> 
      <option value="50">50</option> 
      </select> 
     </li> 
     <li> 
      per page 
     </li> 
     <li> 
      <input type="submit" value="Set" /> 
     </li> 

     </ol> 
    </form> 

    <div style="clear: both;"></div> 

</div> 

감사합니다. 선택, 입력, 버튼, 텍스트 영역 요소 당신이이 규칙을 사용하여 최적의 정렬을 달성 할 수에

Answer 1

당신을 위해이 일을합니까? http://jsfiddle.net/xPk9g/

동일한 기준선을 가져야하는 요소를 감싸는 블럭 요소 나 부동 요소가 있으면 일단 선이 높이, 여백 또는 패딩을 사용하여 기준선을 수동으로 수행해야합니다. 때로는 display: inline-block을 사용하여이 문제를 해결할 수 있습니다.

ol, li, form { 
 
display: inline-block; 
 
} 
 

 
ol.mini-form { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ol.pager-pages { 
 
    margin: 0.5em 0; 
 
    padding: 0.5em 0; 
 
    width: 48%; 
 
} 
 

 
ol.pager-pages li { 
 
    padding: 0.4em; 
 
    margin: 0.1em; 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
} 
 

 
form { 
 
    width: 45%; 
 
    text-align:right;  
 
} 
 

 
ol.pager-result { 
 
    padding: 0.4em; 
 
}

<div> 
 
    <ol class="mini-form pager-pages"> 
 
     <li> 
 
      <a href="...">1</a> 
 
     </li>  
 
     <li> 
 
      <a href="...">2</a> 
 
     </li> 
 
     <li> 
 
      <a href="...">3</a> 
 
     </li> 
 
    </ol> 
 

 
    <form action="..." method="get">   
 
     <ol class="mini-form pager-result"> 
 
     <li> 
 
      <select name="PageSize"> 
 
      <option value="5">5</option> 
 
      <option selected="selected" value="10">10</option>  
 
      <option value="20">20</option> 
 
      <option value="50">50</option> 
 
      </select> 
 
     </li> 
 
     <li> 
 
      per page 
 
     </li> 
 
     <li> 
 
      <input type="submit" value="Set" /> 
 
     </li> 
 

 
     </ol> 
 
    </form> 
 

 
</div>

Answer 2

:

vertical-align: baseline; margin: 0;

IE6/7 *vertical-align: middle