← 返回首页
<display-legacy> - CSS | MDN

Esta página foi traduzida do inglês pela comunidade. Saiba mais e junte-se à comunidade MDN Web Docs.

View in English Always switch to English

<display-legacy>

O CSS 2 usou uma sintaxe de palavra-chave única para o display , exigindo palavras-chave separadas para variantes em nível de bloco e em linha do mesmo modo de layout. Esta página detalha esses valores.

In this article

Sintaxe

inline-block

O elemento gera uma caixa de elemento de bloco que fluirá com o conteúdo circundante, como se fosse uma única caixa embutida (se comportando como um elemento substituído).

É equivalente a inline flow-root.

inline-table

O inline-table O valor não possui um mapeamento direto em HTML. Ele se comporta como um HTML<table> elemento, mas como uma caixa embutida, em vez de uma caixa no nível do bloco. Dentro da caixa da tabela há um contexto em nível de bloco.

É equivalente a inline table.

inline-flex

O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo flexbox.

É equivalente a inline flex.

inline-grid

O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo de grade.

É equivalente a inline grid.

Sintaxe formal

<display-legacy> =
inline-block |
inline-table |
inline-flex |
inline-grid
Esta sintaxe reflete o padrão mais recente conforme CSS Display Module Level 4. Nem todos os navegadores podem ter implementado todas as partes. Consulte Compatibilidade do navegador para informações de suporte.

Exemplo

No exemplo abaixo, estamos criando um contêiner flex inline com a palavra-chave herdada inline-flex.

HTML

html
<div class="container"> <div>Flex Item</div> <div>Flex Item</div> </div> Not a flex item

CSS

css
.container { display: inline-flex; }

Result

Na nova sintaxe, o contêiner flex inline seria criado usando dois valores, inline para o tipo de exibição externo e flex para o tipo de exibição interno.

css
.container { display: inline flex; }

Compatibilidade com navegadores

Suporte deinline-block

css.properties.display.inline-block

Enable JavaScript to view this browser compatibility table.

css.properties.display.inline-table

Enable JavaScript to view this browser compatibility table.

css.properties.display.inline-flex

Enable JavaScript to view this browser compatibility table.

css.properties.display.inline-grid

Enable JavaScript to view this browser compatibility table.

Suporte deinline-table

css.properties.display.inline-block

Enable JavaScript to view this browser compatibility table.

css.properties.display.inline-table

Enable JavaScript to view this browser compatibility table.

css.properties.display.inline-flex

Enable JavaScript to view this browser compatibility table.

css.properties.display.inline-grid

Enable JavaScript to view this browser compatibility table.

Suporte deinline-flex

css.properties.display.inline-block

Enable JavaScript to view this browser compatibility table.

css.properties.display.inline-table

Enable JavaScript to view this browser compatibility table.

css.properties.display.inline-flex

Enable JavaScript to view this browser compatibility table.

css.properties.display.inline-grid

Enable JavaScript to view this browser compatibility table.

Suporte deinline-grid

css.properties.display.inline-block

Enable JavaScript to view this browser compatibility table.

css.properties.display.inline-table

Enable JavaScript to view this browser compatibility table.

css.properties.display.inline-flex

Enable JavaScript to view this browser compatibility table.

css.properties.display.inline-grid

Enable JavaScript to view this browser compatibility table.

Veja também