html - CSS:显示: block ;与显示:表格;

标签 html css html-table

display:block;display:table; 有区别吗?在我看来,包含 table-rowtable-cell 节点的 dom 节点的显示类型并不重要。 MDN says that display:table; makes it behave like a table ,但没有详细说明该行为是什么。那是什么行为?

同样,display:inline-block;display:inline-table;有区别吗?

最佳答案

两者都是 block 级的,因为默认情况下它们不会显示在其他任何内容旁边。

元素的实际显示存在显着差异。 display: block; 将扩展到 100% 的可用空间,而 display: table; 只会与其内容一样宽。

此外,正如其他人所提到的,display: table; 是获取 display: table-cell; 或其他 table- 内容所必需的在后代中工作。

我只知道这一点,因为我刚刚遇到了试图让 display: table; 填充容器宽度的问题。我一直没能看到 display: inline;display: inline-table; 的显示是否有区别。

https://jsfiddle.net/nnbonhc6/

关于html - CSS:显示: block ;与显示:表格;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25048236/

相关文章:

html - Flask 多个提交按钮

html - 导航链接在彼此之上

css - 调整图像大小时如何强制TinyMCE使用内联样式

jquery - 使用 Jquery,将表中的一行替换为新行

html - CSS动态水平导航菜单填满特定宽度(表格行为)

php - 将数组显示为表格

html - CSS 贴纸一半在 block 内,一半在 block 外

html - 如何在图片右侧显示input标签

html - 创建带有分隔符/副标题的可访问列表

javascript - 选中复选框后启用按钮