Jak dopasować linię bazową w dwóch pływających elementach div

Question

Próbuję uzyskać sortowanie CSS dla pager'a. Mam div po lewej stronie dla numerów stron, a jeden po prawej dla małego formularza zawierającego kontrolki, aby ustawić ile pozycji na stronie są wyświetlane.

Gdy strona jest w pełnym rozmiarze, elementy div są na tyle oddalone, że nie ma to większego znaczenia, ale gdy rozmiar strony zostanie zmieniony tak, że litery D już prawie się dotykają, jest to zauważalne.

Jak zmodyfikować mój CSS lub HTML tak, aby tekst był wyrównany w pionie między dwoma elementami div?

To, co w tej chwili wygląda następująco:

Również tekst jest nie dość skoncentrowane w każdej liczby stron. Jak mogę to uruchomić?

Stosowna 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> 

Dzięki.

Answer 1

to działa dla Ciebie? http://jsfiddle.net/xPk9g/

Gdy elementy blokowe lub elementy pływające owijają elementy, które powinny mieć tę samą linię bazową, należy je wkręcić, a linię podstawową należy wykonać ręcznie, korzystając z wysokości linii, marginesu lub wypełnienia. Czasami możesz obejść to, używając 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

na wybranych, wejście, przycisk, elementów textarea można osiągnąć najlepsze wyrównanie za pomocą tych zasad:

vertical-align: baseline; margin: 0;

IE6/7 *vertical-align: middle