Yahoo! User Interface Blog (YUIBlog)

CSS Quick Tipp: Inline-Boxen mit Bottom Alignment

15. November 2010 um 03.09 Uhr von Thierry Koblentz | In CSS 101 , -Entwicklung | 8 Kommentare

Die Herausforderung

Keeping einen Submit-Button am unteren Rand einer Zeile Feld ausgerichtet mit Formular-Steuerelemente positioniert unter ihrem Label (Abbildung 1).

Der schwierige Teil

Wenn der Container-Block ist nicht breit genug für den Submit-Button, um neben den anderen Steuerelementen zu fließen, das muß Taste am Anfang der nächsten Zeile Feld (nach RTL / LTR-Kontext) mit minimalem Raum darüber (Abbildung 2) zeigen.

Die Lösung

display:inline-block ermöglichen es uns, alles im Fluss und am unteren Rand der Zeile Feld zu halten. Dies liegt daran, inline-block erzeugt eine Block-Box (siehe 9.2.4 Die Eigenschaft 'display' ), die sich als eine einzige Inline-Box geflossen ist, ähnlich wie bei einem Element ersetzt (z. B. ein Bild).

Das Markup

Wir Gruppen-Label und Kontrolle Paare innerhalb div s.

 <form>
 <div>
 <label> </ label>
 <select> </ select>
 </ Div>

 <div>
 <label> </ label>
 <select> </ select>
 </ Div>

 <div>
 <label> </ label>
 <select> </ select>
 </ Div>

 <div>
 <input /> 
 </ Div>
 </ Form>

Das CSS

 label {display: block;}
 div {
 display: inline-block;
 margin: 0 10px 10px 0;
 * Display: inline;
 zoom: 1;
 } 

Um die Schaltflächen unten, die damit verbundenen Etikett zu positionieren, Stil, den wir die Etiketten mit display:block (ohne dies würden diese Elemente zeigen, Side-by-Side).

Beachten Sie, dass die Etiketten als Styling-Block macht sie nicht über die Form zu erweitern, sondern nur über ihre Eltern-Boxen - die Aktien der gleichen Zeile angezeigt. Dies ist, weil das Innere eines Inline-Block als ein Block-Box formatiert ist, und den Kasten selbst wird als Inline-Box formatiert.

Die beiden letzten Regeln sind für den IE 6 und 7, die keine Unterstützung inline-block . Für diese Browser müssen wir den Stil div s als Inline-und Einsatz zoom . Beachten Sie, dass dieser Hack nicht so robust wie die reale Sache, weil eine verschachtelte (nicht ersetzt) ​​Element mit einem Layout, alles brechen wird, sitzt in einer eigenen Zeile innerhalb des Formulars. Also, es sei denn, Sie geben solche verschachtelten Elementen eine Breite zu planen, geben sie nicht ein Layout.

Die Demos

Jahr 2010

Monat Januar

Tag 1

Jahr 2010

Monat Januar

Tag 1

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

8 Kommentare

1. Good Ole IE6 und 7

   Kommentar von Jeffrey Gilbert - 16. November 2010 #

2. Sind Sie sicher, dass inline-block überhaupt nicht IE6 unterstützt? Vielleicht display: inline-block-Modus wird nicht * komplett * in IE6 unterstützt.

   Ich erinnere mich, nach drei Jahren bei einem Web-Unternehmens schriftlich IE6 kompatibel Standorten Tag für Tag, ich diese oft übersehen Display-Modus überdenken. Ich hatte für eine lange Zeit, dass es nicht funktionieren würde angenommen, aber es tat. Ich hatte diese Tasten, die ich im Laufe der Zeit, die variable Länge Text in es haben kann, mit den üblichen runden Ecken Hintergrund-Bilder ein allen verfeinert. Ich wandelte sie um inline-block und fanden sie hat prima funktioniert in IE6, so dass dazu beigetragen, die das CSS ein wenig. Ein sehr schöner Nebeneffekt war, dass die Tasten nicht mehr zu brechen, wenn der Knopf in einem kleinen Tisch Zelle zusammengepfercht ist, etwas, das ich nicht mit meinem vorherigen Inline + line-height-Tasten (diese waren wirklich flexible Tasten für Unternehmens-Websites, wie lösen konnte, , die nicht genutzt hat Schwimmer und Block-Modus, konnte aber die Hintergrund-Bilder haben, mit den abgerundeten Seiten und schweben Bild etc).

   Kommentar von Fabrice - 16. November 2010 #

3. Ach, sagt Quirksmode inline-block Unterstützung auf IE6 / 7 ist nur für "natürliche" Inline-Elemente. Das erklärt, warum meine Inline-Block Tasten arbeitete in IE6 (sie wurden von A> SPAN gemacht).

   Im obigen Beispiel FORM Ich vermute, das Schalten der DIVs Spannweiten würde es im IE6 zu arbeiten, aber dann ist es wahrscheinlich egal ;-)

   Kommentar von Fabrice - 16. November 2010 #

4. @ Fabrice

   Dies liegt daran, display: inline-block gibt Elemente eines Layouts.
   Als Randnotiz kann dieser Wert als Layout-Schalter verwendet werden. Zum Beispiel:

   a {display: inline-block;}
   a {display: inline;}

   Das oben wird das als Layout (in IE) geben.
   Beachten Sie, dass dies nicht funktionieren würde, wenn beide Erklärungen in derselben Regel verwendet wurden.

   Kommentar von Thierry Koblentz - 16. November 2010 #

5. Der schwierige Teil Wenn der umschließende Block ist nicht breit genug für den Submit-Button, um neben den anderen Steuerelementen zu fließen, das muss Taste am Anfang der nächsten Zeile Feld (nach RTL / LTR-Kontext) mit minimalem Raum darüber (Abbildung zeigen 2). Die Lösung display: inline-block ermöglichen es uns, alles im Fluss und am unteren Rand der Zeile Feld zu halten.

   Kommentar von Antwort-SMS Hindi - 16. November 2010 #

6. Der gleiche Ansatz wird auch hier http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

   Kommentar von Ionut Popa - 17. November 2010 #

7. @ Ionut

   Vor Jahren habe ich eine Demo auf tjkdesign.com zu den Thumbnails auf dieser Methode basierenden anzuzeigen:

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

   Ich hatte andere interessante Möglichkeiten, um die Anzeige:

   Der untere Rand des Bildes ist die Grundlinie:
   - http://tjkdesign.com/articles/thumbnail_and_caption/image_grid.asp

   Der untere Teil der Tagesordnung folgt der Grundlinie:
   - http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_-moz-inline-stack_and_zoom.asp

   Anzeigen der Elemente in einem Raster:
   - http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_table-cell_and_zoom.asp

   Kommentar von Thierry Koblentz - 17. November 2010 #

8. @ @ Ionut und Thierry

   Ich habe auch etwas auf meine Webseite einfügen eine Weile her. Es kann sein, ein bisschen leichter zu verstehen, wie sie versucht nur zu zeigen, Ihnen eine Lösung für die Anzeige: inline-block, wie die Standards Konsortium definiert sie.

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

   Kommentar von roydukkey - 24. November 2010 #

Leider ist die Kommentarfunktion zu diesem Zeitpunkt geschlossen.