दो फ़्लोटिंग divs में बेसलाइन से मिलान कैसे करें

Question

मैं एक पेजर के लिए सीएसएस को क्रमबद्ध करने की कोशिश कर रहा हूं। मेरे पास पृष्ठ संख्याओं के लिए एक div छोड़ा गया है, और प्रत्येक पृष्ठ को प्रदर्शित करने के लिए नियंत्रण वाले एक छोटे से फॉर्म के लिए एक फ़्लोट किया गया है।

जब पृष्ठ पूर्ण आकार में होता है तो divs काफी दूर हैं, इससे कोई फर्क नहीं पड़ता कि यह वास्तव में कोई फर्क नहीं पड़ता है, लेकिन जब पृष्ठ का आकार बदलता है तो divs लगभग स्पर्श कर रहे हैं, यह ध्यान देने योग्य है।

मैं अपने सीएसएस या एचटीएमएल को कैसे संशोधित करूं ताकि टेक्स्ट दो divs के बीच लंबवत रूप से गठबंधन हो?

इसके अलावा, पाठ काफी प्रत्येक पृष्ठ संख्या में केंद्रित नहीं है:

यह वर्तमान में क्या लग रहा है की तरह है। मैं इससे कैसे काम लूं?

प्रासंगिक सीएसएस:

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/

एक बार जब आप ब्लॉक तत्वों या तत्वों है कि एक ही आधारभूत होना चाहिए लपेटकर तैरता है, तो आप मुसीबत में हैं, और आप line-height, मार्जिन या पैडिंग का उपयोग करके स्वयं आधारभूत करना होगा। कभी-कभी आप 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