当前位置：文江博客话题详情

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

发布于 2024-12-27 04:24:36 字数 1760 浏览 0 评论 0原文

我正在尝试为寻呼机排序 CSS。我有一个向左浮动的 div 用于显示页码，一个向右浮动的 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>

谢谢。

原文

I'm trying to get the CSS sorted for a pager. I have a div floated left for the page numbers, and one floated right for a small form containing controls to set how many items per page are displayed.

When the page is at full size the divs are far enough apart that it doesn't really matter, but when the page is resized so that the divs are almost touching, it's noticeable.

How do I modify my CSS or HTML so that the text is vertically aligned between the two divs?

This is what it currently looks like:

Screenshot

Also, the text isn't quite centered in each page number. How do I get this to work?

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

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情域 2025-01-03 04:24:36

这对你有用吗？ 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>

Does this work for you? http://jsfiddle.net/xPk9g/

Once you have block elements or floats wrapping the elements that should have the same baseline, you're screwed, and you will have to do the baseline manually by using line-height, margin or padding. Sometimes you can get around this by using 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>

回复收藏 0 原文