ヤフーユーザーインターフェイスブログ（YUIBlog）

CSSクイックヒント：ボトムアライメントとインラインボックス

ティエリーKoblentzによって3:09 pmに2010年11月15日|でCSS 101 、 開発 | 8コメント

挑戦

フォームに合わせ、ラインボックスの下部にある[送信]ボタンを保ちます（図1）、そのラベルの下に配置を制御します。

トリッキーな部分

包含ブロックは、他のコントロールの横に流れるようにボタンを登録する十分な幅がない場合は、そのボタンをクリックすると、その上に最小限の空間（図2）次の行ボックスの先頭（RTL / LTR文脈に応じて）で表示する必要があります。

ソリューション

display:inline-block私たちは流れの中でと行ボックスの下部にあるすべてのものを維持することができます。 これは、 inline-blockブロックボックス（参照生成9.2.4 'display'プロパティを 、単一のインラインボックスとして流される自分自身）を、置き換えられた要素（つまり画像）に似ています。

マークアップ

我々内部のグループラベルとコントロールのペアdivの。

 <FORM>
 <DIV>
 <label>は</ラベル>
 <select>の</ SELECT>
 </ DIV>

 <DIV>
 <label>は</ラベル>
 <select>の</ SELECT>
 </ DIV>

 <DIV>
 <label>は</ラベル>
 <select>の</ SELECT>
 </ DIV>

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

CSS

ラベル{表示：ブロック;}
 DIV {
表示：インラインブロック;
マージン：0 10pxの10pxの0;
 *ディスプレイ：インライン;
ズーム：1;
 } 

それらに関連付けられたラベルの下にコントロールを配置するために、私たちはスタイルとラベルdisplay:block （これなしに、これらの要素はサイド·バイ·サイドを示します）。

ブロックとしてラベルをスタイリングすると、彼らはフォーム全体に展開させるだけ、親ボックスを越えていないことに注意してください-を共有し、同じ行ボックスが表示されます。 インラインブロックの内部はブロックボックスとしてフォーマットされ、ボックス自体がインラインボックスとしてフォーマットされているためです。

最後の二つの規則がサポートされていませんIE 6と7のためのものですinline-block 。 これらのブラウザのために、私たちはスタイルする必要がdivのインラインおよび使用などのzoom 。 ネストされた（非置換）要素ので、このハックは、本物のように堅牢ではないことに注意してレイアウトを持つが、フォーム内の独自の行上に座って、すべてを破壊されます。 このようなネストした要素に幅を与えることを計画しない限り、それらのレイアウトを与えることはありません。

デモ

年 2010年

月 1月

日 1

年 2010年

月 1月

日 1

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

8コメント

1. 良いOLE IE6と7

   ジェフリー·ギルバートによるコメント- 2010年11月16日＃

2. あなたは、インラインブロックは、すべてのIE6でサポートされていないことを確認していますか？ おそらく表示：インラインブロックモードは、*完全に* IE6でサポートされていません。

   私は一日でIE6互換性のあるサイトの日を書いて、ウェブ会社で3年後に覚えている、私は、この見落とされがちな表示モードを再考した。 私はそれが動作しないことを長い時間を想定していたが、それはなかった。 私はすべての通常の丸い角の背景画像と、それに可変長のテキストを持つことができます時間をかけて洗練されているこれらのボタンを持っていた。 私がインラインブロックに変換し、彼らがIE6でうまく働いて見つかった、CSSを少し減らす助けたようにすることができます。 つの非常に良い副作用は、ボタンが小さいテーブルのセルに詰め込まれたときのボタンはもはや壊れないだろうということでした、私は私の以前のインライン+ line-heightのボタン（これらはウェブサイトのような企業にとって真に柔軟なボタンがあったが、で解決できない何かどのフロートおよびブロックモードを使用しませんでしたが、背景画像を持つことができ、丸みを帯びた側面と、イメージなどを合わせる）。

   ファブリスによるコメント- 2010年11月16日＃

3. ああ、quirksmodeは、IE6 / 7でインラインブロックのサポートは "自然な"インライン要素に対してのみであると言います。 私のインラインブロックボタンがIE6で働いていたその理由は、（それらは> SPANで作られた）について説明します。

   しかし、それはおそらく;-)問題ではない、私はスパンをdivを切り替え疑う上記のフォームの例は、それがIE6で動作させるだろうに

   ファブリスによるコメント- 2010年11月16日＃

4. @ファブリス

   インラインブロック要素のレイアウトを与える：ディスプレイがあるためです。
   サイドノートとして、この値は、レイアウトのスイッチとして使用することができます。 たとえば、次のように

   {表示：インラインブロック;}
   {表示：インライン;

   上記は、レイアウト（IE）として得られます。
   両方の宣言は同じルール内で使用した場合、これは動作しないことに注意してください。

   によるコメントティエリKoblentz - 2010年11月16日＃

5. トリッキーな部分を含むブロックは、submitボタンは、他のコントロールの横に流れるように十分な幅がない場合は、そのボタンをクリックすると、その上に最小限のスペースで次の行ボックス（RTL / LTRコンテキストに応じて）の先頭に表示する必要があります（図2）。 ソリューションの表示：インラインブロックは、私たちは流れの中でと行ボックスの下部にあるすべてのものを維持することができます。

   によるコメント返信SMSのヒンディー語 - 2010年11月16日＃

6. 同じアプローチはまた、ここで使用されhttp://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

   によるコメントionutポッパ - 2010年11月17日＃

7. @ Ionut

   年前、私はこの方法に基づいてサムネイルを表示し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 - 2010年11月17日＃

8. @ Ionutと@ティエリー

   また、私はしばらく前に私のサイトに何かを入れている。 標準化コンソーシアムはそれを定義する方法をインラインブロック：それはあなただけの表示のためのソリューションを表示しようとするときに理解することは少し簡単かもしれません。

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

   によるコメントroydukkey - 2010年11月24日＃

申し訳ありませんが、コメントフォームは、この時点でクローズされます。