Esempio
Visualizzazione <p> elementi come elementi inline:
p.inline
{
display: inline;
}
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà di visualizzazione specifica il tipo di contenitore utilizzato per un elemento HTML.
| Valore di default: | inline |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS1 |
| sintassi JavaScript: | object .style.display="none" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 Parziale da 5.5 | 3.0 | 3.1 | 7.0 |
Note: I valori "inline-table" , "table" , "table-caption" , "table-cell" , "table-column" , "table-column-group" , "table-row" , e "table-row-group" non sono supportate in IE7 e versioni precedenti. IE8 richiede un DOCTYPE!. IE9 supporta i valori.
Nota: I valori di "flex" e "inline-flex" richiede un prefisso per lavorare in Safari. Per "flex" usare "display: -webkit-flex" , per "inline-flex" usare "display: -webkit-inline-flex;" .
CSS Sintassi
display:value;I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| inline | Valore di default. Consente di visualizzare un elemento come un elemento in linea (like <span>) | Gioca " |
| block | Consente di visualizzare un elemento come un elemento di blocco (like <p>) | Gioca " |
| flex | Consente di visualizzare un elemento come un contenitore flessibile a livello di blocco. Nuovo in CSS3 | |
| inline-block | Consente di visualizzare un elemento come un contenitore di blocco a livello di riga. L'interno di questo blocco è formattato come box a livello di blocco, e l'elemento stesso è formattato come una scatola a livello di riga | |
| inline-flex | Consente di visualizzare un elemento come un contenitore flessibile a livello di riga. Nuovo in CSS3 | |
| inline-table | L'elemento viene visualizzato come una tabella a livello di riga | |
| list-item | Lasciate che l'elemento si comporti come un <li> elemento | Gioca " |
| run-in | Consente di visualizzare un elemento sia come blocco o in linea, a seconda del contesto | |
| table | Lasciate che l'elemento si comporti come un <table> elemento | |
| table-caption | Lasciate che l'elemento si comporti come un <caption> elemento | |
| table-column-group | Lasciate che l'elemento si comporti come un <colgroup> elemento | |
| table-header-group | Lasciate che l'elemento si comporti come un <thead> elemento | |
| table-footer-group | Lasciate che l'elemento si comporti come un <tfoot> elemento | |
| table-row-group | Lasciate che l'elemento si comporti come un <tbody> elemento | |
| table-cell | Lasciate che l'elemento si comporti come un <td> elemento | |
| table-column | Lasciate che l'elemento si comporti come un <col> elemento | |
| table-row | Lasciate che l'elemento si comporti come un <tr> elemento | |
| none | L'elemento non verrà visualizzato affatto (has no effect on layout) | Gioca " |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | Gioca " |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
Esempio
Una dimostrazione di come utilizzare il valore della proprietà ereditare:
body {
display: inline;
}
p {
display: inherit;
} Prova tu stesso " Esempio
Impostare la direzione di alcuni elementi flessibili all'interno di un <div> elemento in ordine inverso:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
} Prova tu stesso " Pagine correlate
Tutorial CSS: CSS Display e visibilità
Di riferimento HTML DOM: display property