inline-block和inline-table有什么区别？ [英] What is the difference between inline-block and inline-table?

问题描述

据我所知，这些显示选择器似乎是相同的。

从Mozilla CSS文档：

inline-table ：inline-table值在HTML中没有直接映射。它的行为像一个< table> HTML元素，但是作为一个内联框，而不是一个块级框。在表框内是一个块级上下文。

inline-block ：元素生成一个块元素框它将与周围的内容一起流动，好像它是一个单独的内联框（表现得像一个替换的元素）。

看来，可以使用 inline-block 。

inline-table >解决方案

display：table 会使你的标签表现得像一个表。
inline-table 只是意味着该元素显示为内联级表。然后，您可以通过 table-cell 让您的元素表现得像一个< td> 元素。

display：inline - 将您的元素显示为内联元素（如< span> ; ）和 inline-block 只会将它们组合在一个块容器中。

因为另一个答案建议你可以替换两者之间，只要你遵循显示约定在其余的代码。 （即使用 table-cell 和 inline-table ，而不是 inline-block ）。

查看此链接以了解有关显示的更多信息：
https://developer.mozilla.org/en-US/docs/Web/CSS/display




As far as I can tell, these display selectors seem to be identical.

From the Mozilla CSS documentation:

inline-table: The inline-table value does not have a direct mapping in HTML. It behaves like a <table> HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.

inline-block: The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

It seems that whatever could be done with inline-table can be done with inline-block.

解决方案

display:table will make your tag behave like a table. inline-table just means that the element is displayed as an inline-level table. You can then do table-cell to let your element behave like a <td> element.

display:inline - displays your element as an inline element (like <span>), and inline-block will just group them together in a block container.

As the other answer suggested you can replace between the two as long as you follow the display convention in the rest of your code. (i.e. use table-cell with inline-table and not with inline-block).
Check this link for more info on display: https://developer.mozilla.org/en-US/docs/Web/CSS/display

这篇关于inline-block和inline-table有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！