Beispiel
Anzeige <p> Elemente als Inline - Elemente:
p.inline
{
display: inline;
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die Anzeige-Eigenschaft gibt die Art der Box für ein HTML-Element verwendet wird.
| Standardwert: | inline |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS1 |
| JavaScript-Syntax: | object .style.display="none" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 Teil von 5,5 | 3.0 | 3.1 | 7.0 |
Note: Die Werte "inline-table" , "table" , "table-caption" , "table-cell" , "table-column" , "table-column-group" , "table-row" und "table-row-group" sind nicht in IE7 und früher unterstützt. IE8 erfordert eine DOCTYPE!. IE9 unterstützt die Werte.
Hinweis: Die Werte "flex" und "inline-flex" erfordert ein Präfix in Safari zu arbeiten. Für "flex" verwenden "display: -webkit-flex" für "inline-flex" verwenden "display: -webkit-inline-flex;" .
CSS-Syntax
display:value;Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| inline | Standardwert. Zeigt ein Element als Inline - Element (like <span>) | Spiel es " |
| block | Zeigt ein Element als Blockelement (like <p>) | Spiel es " |
| flex | Zeigt ein Element als Block-Level-flex-Container. Neu in CSS3 | |
| inline-block | Zeigt ein Element als Inline-Level-Blockbehälter. Das Innere dieser Block wird als Block-Level-Box formatiert und das Element selbst wird als Inline-Level-Box formatiert | |
| inline-flex | Zeigt ein Element als Inline-Ebene Flex-Container. Neu in CSS3 | |
| inline-table | Das Element wird als Inline-Level-Tabelle angezeigt | |
| list-item | Lassen Sie das Element verhalten sich wie ein <li> Element | Spiel es " |
| run-in | Zeigt ein Element entweder als Block oder Inline, je nach Kontext | |
| table | Lassen Sie das Element verhalten sich wie ein <table> Element | |
| table-caption | Lassen Sie das Element verhalten sich wie ein <caption> Element | |
| table-column-group | Lassen Sie das Element verhalten sich wie ein <colgroup> Element | |
| table-header-group | Lassen Sie das Element verhalten sich wie ein <thead> Element | |
| table-footer-group | Lassen Sie das Element verhalten sich wie ein <tfoot> Element | |
| table-row-group | Lassen Sie das Element verhalten sich wie ein <tbody> Element | |
| table-cell | Lassen Sie das Element verhalten sich wie ein <td> Element | |
| table-column | Lassen Sie das Element verhalten sich wie ein <col> Element | |
| table-row | Lassen Sie das Element verhalten sich wie ein <tr> Element | |
| none | Das Element wird nicht angezeigt werden (has no effect on layout) das (has no effect on layout) | Spiel es " |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs | Spiel es " |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Mehr Beispiele
Beispiel
Eine Demonstration, wie das Vererben Eigenschaft Wert zu verwenden:
body {
display: inline;
}
p {
display: inherit;
} Versuch es selber " Beispiel
Stellen Sie die Richtung einiger flexible Elemente in einem <div> Element in umgekehrter Reihenfolge:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
} Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS - Anzeige und Sichtbarkeit
HTML - DOM - Referenz: display property