如何匹配两个浮动div中的基线

Question

我正在尝试将CS​​S分类为寻呼机.我有一个div浮动左边的页码,一个浮动右边的小表单包含控件来设置每页显示的项目数.

当页面处于完整大小时,div之间相距足够远,以至于它并不重要,但是当页面调整大小以使div几乎触及时,它是显而易见的.

如何修改我的CSS或HTML,以便文本在两个div之间垂直对齐？

这是它目前的样子:

此外,文本在每个页码中并不完全居中.我如何让它工作？

相关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>