表中的块元素

使用CSS和HTML的这种组合，为什么<header>HEADER</header>呈现在<nav>NAVIGATION</nav>以上？表中的块元素

#wrapper { display: table; } 
 
header { display: table-header-group; }

<div id="wrapper"> 
 
    <nav>NAVIGATION</nav> 
 
    <header>HEADER</header> 
 
</div>

来源

2016-06-07 J.Joe

你是什么意思，“malformatted”？ –

我不明白你的问题，也不知道你想要完成什么。 – Chris

请不要让人们点击进入小提琴站点以查看您询问的代码。 – zwol

的<nav>元素有display:block，它是一个元素与display:table眼前的孩子，所以布局引擎生成它周围的“匿名包装盒”，以迫使它符合下表格式模型。类似地，<header>元素中的裸文本节点（display:table-header-group）被包装。 “盒子树”导致的是一样的，如果你这样写HTML没有CSS：

<table> 
 
<tbody><tr><td><div>NAVIGATION</div></td></tr></tbody> 
 
<thead><tr><td><div>HEADER</div></td></tr></thead> 
 
</table>

而一个<table>被指定为显示其<thead>第一的内容，那么它的<tbody>，所以你得到HEADER，然后导航。

请参阅CSS3 Display规范中关于“layout-internal display types”的讨论。例1特别描述了与此非常相似的东西。

来源

2016-06-07 20:22:13 zwol

如果“的malformatted”你的意思是没有正确对齐，没有 - 因为你设置的包装器表的显示。这不是一个实际的表格HTML元素。

来源

2016-06-07 20:22:00 kawnah

表中的块元素

回答

相关问题