Cách so khớp đường cơ sở trong hai divs nổi

Question

Tôi đang cố gắng sắp xếp CSS cho một máy nhắn tin. Tôi có một div được để lại cho số trang, và một cái được thả nổi bên phải cho một biểu mẫu nhỏ chứa các điều khiển để thiết lập số lượng các mục trên mỗi trang được hiển thị.

Khi trang ở kích thước đầy đủ các div cách nhau đủ xa, điều đó không thực sự quan trọng, nhưng khi trang được thay đổi kích thước sao cho các div gần như chạm vào, nó đáng chú ý.

Làm cách nào để sửa đổi CSS hoặc HTML để văn bản được căn chỉnh theo chiều dọc giữa hai div?

Đây là những gì nó hiện trông giống như:

Ngoài ra, văn bản này không hoàn toàn tập trung ở mỗi số trang. Làm cách nào để làm việc này?

CSS liên quan:

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> 

Cảm ơn.

Answer 1

Điều này làm việc cho bạn? http://jsfiddle.net/xPk9g/

Khi bạn đã chặn các phần tử hoặc nổi gói các thành phần cần có cùng đường cơ sở, bạn bị vặn và bạn sẽ phải thực hiện đường cơ sở theo cách thủ công bằng cách sử dụng đường kẻ cao, lề hoặc đệm. Đôi khi bạn có thể giải quyết vấn đề này bằng cách sử dụng 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

On lựa chọn, đầu vào, nút, các yếu tố textarea bạn có thể đạt được sự liên kết tốt nhất sử dụng các quy tắc:

vertical-align: baseline; margin: 0;

IE6/7 *vertical-align: middle