Yahoo!用戶界面博客（YUIBlog）

CSS快速提示：內框底部對齊

11月15日，2010 3:09 PM由Thierry Koblentz | 101的CSS ， 發展 | 8評論

我們面臨的挑戰

保持一個提交形式對齊線箱底部的按鈕，控制低於其標籤的位置（圖1）。

最棘手的部分

如果包含塊是不夠寬的提交按鈕流入旁邊的其他控件，按鈕必須顯示在開始的下一行中的RTL / LTR的背景下，與它上面的最小空間（圖2）。

該解決方案

display:inline-block使我們能夠保持流量和行框底部的一切。 這是因為inline-block生成一個塊框（見9.2.4“顯示”屬性 ），這本身就是作為一個單一的內框流，類似取代的元素（如圖像）。

標記

我們組標籤和內部控制對div小號。

 <FORM>
 <DIV>
 <label>的</標籤>
 <SELECT> </ SELECT>
 </ DIV>

 <DIV>
 <label>的</標籤>
 <SELECT> </ SELECT>
 </ DIV>

 <DIV>
 <label>的</標籤>
 <SELECT> </ SELECT>
 </ DIV>

 <DIV>
 <input /> 
 </ DIV>
 </ FORM>

的CSS

標籤{顯示：塊;}
格{
顯示：內聯塊;
保證金：0 10px 10px 0;
 *顯示：內聯;
變焦：1;
 } 

定位低於其相關的標籤控制，我們的風格與標籤display:block （如果沒有這個，這些元素會顯示端）。

請注意，造型像塊的標籤不會使他們擴大整個形式，但只有在其母公司盒-它們共享同一行中。 這是因為裡面內嵌塊被格式化為塊框，框本身是作為一個行內框的格式 。

最後兩個規則是為IE 6和7不支持inline-block 。 對於這些瀏覽器，我們需要的風格div div內聯和使用小號zoom 。 請注意，這個黑客是不動真格的強勁，因為嵌套（非取代）的元素與佈局將打破一切，坐在其內部自己的形式。 所以，除非你打算放棄這種嵌套元素的寬度，不要給他們一個佈局。

演示

年 2010

月 一月

天 1

年 2010

月 一月

天 1

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！

8評論

1. 良好的OLE IE6和7

   杰弗裡·吉爾伯特- 11月16日，2010 ＃

2. 你是確保內聯塊沒有在所有IE6的支持嗎？ 顯示：直列塊模式也許不完全在IE6的支持。

   我記得在網上寫在IE6的兼容網站一天一天的公司三年後，我重新考慮這往往被忽視的顯示模式。 我曾經以為很長一段時間，它不會工作，但它沒有。 我有我細化隨著時間的推移，它可以在可變長度的文本，與通常的圓角背景圖像全，這些按鈕。 我並將其轉化為內聯塊，發現他們的工作只是在IE6罰款，這樣有助於減少CSS一點點。 一個非常好的副作用是按鈕將不再打破按鈕時，擠在一張小桌子細胞;一些我解決不了，我以前的聯+線高度按鈕（這是真正靈活的企業網站等按鈕，不使用浮動和塊模式，但可能有背景圖片，圓潤雙方和懸停圖像等）。

   由Fabrice - 11月16日，2010 ＃

3. 啊，quirksmode說，內聯塊支持IE6 / 7只為“自然”內聯元素。 這就解釋了為什麼我的內聯塊按鈕，在IE6（>大跨度）。

   在表格的例子，上面我懷疑開關的DIV SPANS使它工作在IE6中，但它可能並不重要;-)

   由Fabrice - 11月16日，2010 ＃

4. @法布里斯

   這是因為顯示：內聯塊元素佈局。
   作為一個側面說明，這個值可以被用來作為一個佈局切換。 例如：

   {顯示：內聯塊;}
   {顯示：內聯;}

   上述會給佈局（IE）。
   請注意，這將不會工作，如果兩個聲明，使用相同的規則。

   評論由蒂埃里Koblentz - 11月16日，2010 ＃

5. 最棘手的部分，如果包含塊是不夠寬的提交按鈕流入旁邊的其他控件，按鈕必須顯示在開始的下一行中的RTL / LTR的背景下，與它上面的最小空間（圖2）。 該解決方案顯示：內聯塊，使我們能夠保持流量和行框底部的一切。

   評論回复短信印地文 - 11月16日，2010 ＃

6. 同樣的方法也被用來在這裡http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

   評論約努茨波帕 - 11月17日，2010 ＃

7. @約努茨

   幾年前，我把對tjkdesign.com演示基於這種方法來顯示縮略圖：

   http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_-moz-inline-box_and_zoom.asp

   我有其他有趣的方式來顯示這些：

   圖像的底部是基線：
   - http://tjkdesign.com/articles/thumbnail_and_caption/image_grid.asp

   該項目的底部是基線：
   - http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_-moz-inline-stack_and_zoom.asp

   在網格中顯示的項目：
   - http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_table-cell_and_zoom.asp

   評論由蒂埃里Koblentz - 11月17日，2010 ＃

8. @約努茨和蒂埃里@

   我也把我的網站上的東西，前一陣子。 更容易理解，因為它只是試圖告訴你的顯示解決方案：內聯塊標準聯盟的方式定義它，它可能是一點點。

   http://www.roydukkey.com/display-inline-block-zoom/

   評論roydukkey - 11月24日，2010 ＃

很抱歉，評論已被封閉，在這個時候。