Question

我正在尝试将CSS分类为寻呼机。我有一个div浮动的页面编号，一个浮动右边的小表单包含控件来设置每页显示的项目数。

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

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

目前的情况如下：

Screenshot

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

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

在选择，输入，按钮，textarea元素上，您可以使用以下规则实现最佳对齐：

vertical-align: baseline; margin: 0;

IE6 / 7 *vertical-align: middle

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

2 个答案: