2つのフローティングディビジョンのベースラインを一致させる方法

Question

ページャのためにソートされたCSSを取得しようとしています。私はdivをページ番号のために左に浮かべて、1つはページあたりのアイテムの数を表示するコントロールを含む小さなフォームのために右に浮かべました。

ページがフルサイズのとき、divは十分に離れていても問題はありませんが、ページのサイズを変更してdivがほとんど接触していると目立ちます。

テキストを2つの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> 

感謝。選択、入力、ボタン、TEXTAREA要素は、これらのルールを使用して最良のアラインメントを達成することができますオン

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