Html 内联块和内联表有什么区别?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19352072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between inline-block and inline-table?
提问by Steve Barna
As far as I can tell, these display
selectors seem to be identical.
据我所知,这些display
选择器似乎是相同的。
From the Mozilla CSS documentation:
来自 Mozilla CSS 文档:
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-table
: inline-table 值在 HTML 中没有直接映射。它的行为类似于<table>
HTML 元素,但作为内联框,而不是块级框。表框内部是块级上下文。
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).
inline-block
: 元素生成一个块元素框,它将与周围的内容一起流动,就好像它是一个单独的内联框(行为很像被替换的元素)。
It seems that whatever could be done with inline-table
can be done with inline-block
.
似乎inline-table
可以用inline-block
.
采纳答案by Quantico
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:table
将使您的标签表现得像一张桌子。
inline-table
只是意味着该元素显示为内联级表。然后你可以table-cell
让你的元素表现得像一个<td>
元素。
display:inline
- displays your element as an inline element (like <span>
), and inline-block
will just group them together in a block container.
display:inline
- 将您的元素显示为内联元素(如<span>
),并将inline-block
它们组合在一个块容器中。
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 linkfor more info on display
.
正如另一个答案所建议的那样,只要您遵循其余代码中的显示约定,您就可以在两者之间进行替换。(即使用table-cell
withinline-table
和 not with inline-block
)。
查看此链接以获取有关 的更多信息display
。
回答by Oriol
Both inline-block
and inline-table
have an inline
outer display role. That means
双方inline-block
并inline-table
有一个外部显示器的作用。这意味着inline
The element generates an inline-level box.
该元素生成一个内联级 box。
The difference is that
不同之处在于
inline-block
has aflow-root
inner display model, that isThe element generates a block containerbox, and lays out its contents using flow layout. It always establishes a new block formatting contextfor its contents.
inline-table
has atable
inner display model, that isThe element generates a principal table wrapper boxcontaining an additionally-generated table box, and establishes a table formatting context.
inline-block
有一个内部显示模型,即flow-root
该元素生成一个包含额外生成的表格框的主表格包装框,并建立一个表格格式上下文。
However, in most cases, inline-table
will behave like inline-block
because of anonymous table objects:
但是,在大多数情况下,inline-table
会inline-block
因为匿名表对象而表现得像:
Generate missing child wrappers:
- If a child C of a 'table' or 'inline-table' box is not a proper table child, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not proper table children.
- If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes.
生成丢失的子包装器:
- 如果“表”或“内联表”框的子 C 不是适当的表子,则围绕 C 和 C 的所有连续兄弟(不是适当的表子)生成匿名“表行”框。
- 如果“table-row”框的子 C 不是“table-cell”,则围绕 C 和 C 的所有连续兄弟(不是“table-cell”框)生成一个匿名“table-cell”框。
Therefore, if your inline-table
element has non-tabular content, that content will be wrapped in an anonymous table-cell
.
因此,如果您的inline-table
元素具有非表格内容,则该内容将被包装在一个匿名的table-cell
.
And table-cell
has a flow-root
inner display model, just like inline-block
.
并且table-cell
有一个内显示模型,就像。flow-root
inline-block
But if the inline-table
has tabular content, it will behave differently than inline-block
.
但是,如果inline-table
具有表格内容,则其行为将与inline-block
.
Some examples:
一些例子:
Inside an
inline-block
, cells with non-tabular separator will generate differenttable
anonymous parents, so they will appear at different lines. Inside aninline-table
, it will be the separator who will generate atable-cell
parent, so they all will appear at the same row..itable { display: inline-table; } .iblock { display: inline-block; } .cell { display: table-cell; } .wrapper > span { border: 1px solid #000; padding: 5px; }
<fieldset> <legend>inline-table</legend> <div class="itable wrapper"> <span class="cell">table-cell</span> <span class="iblock">inline-block</span> <span class="cell">table-cell</span> </div> </fieldset> <fieldset> <legend>inline-block</legend> <div class="iblock wrapper"> <span class="cell">table-cell</span> <span class="iblock">inline-block</span> <span class="cell">table-cell</span> </div> </fieldset>
Inner cells won't grow to fill a wide
inline-block
:.itable { display: inline-table; } .iblock { display: inline-block; } .wrapper { width: 100%; } .cell { display: table-cell; border: 1px solid #000; }
<fieldset> <legend>inline-table</legend> <div class="itable wrapper"> <span class="cell">table-cell</span> </div> </fieldset> <fieldset> <legend>inline-block</legend> <div class="iblock wrapper"> <span class="cell">table-cell</span> </div> </fieldset>
The border of the
inline-block
won't collapse with the border of the inner cells:.wrapper, .cell { border-collapse: collapse; border: 5px solid #000; } .itable { display: inline-table; } .iblock { display: inline-block; } .cell { display: table-cell; }
<fieldset> <legend>inline-table</legend> <div class="itable wrapper"> <span class="cell">table-cell</span> <span class="cell">table-cell</span> </div> </fieldset> <fieldset> <legend>inline-block</legend> <div class="iblock wrapper"> <span class="cell">table-cell</span> <span class="cell">table-cell</span> </div> </fieldset>
在
inline-block
, 带有非表格分隔符的单元格将生成不同的table
匿名父项,因此它们将出现在不同的行中。在 a 中inline-table
,分隔符将生成table-cell
父级,因此它们都将出现在同一行。.itable { display: inline-table; } .iblock { display: inline-block; } .cell { display: table-cell; } .wrapper > span { border: 1px solid #000; padding: 5px; }
<fieldset> <legend>inline-table</legend> <div class="itable wrapper"> <span class="cell">table-cell</span> <span class="iblock">inline-block</span> <span class="cell">table-cell</span> </div> </fieldset> <fieldset> <legend>inline-block</legend> <div class="iblock wrapper"> <span class="cell">table-cell</span> <span class="iblock">inline-block</span> <span class="cell">table-cell</span> </div> </fieldset>
内部细胞不会长到填满一个宽
inline-block
:.itable { display: inline-table; } .iblock { display: inline-block; } .wrapper { width: 100%; } .cell { display: table-cell; border: 1px solid #000; }
<fieldset> <legend>inline-table</legend> <div class="itable wrapper"> <span class="cell">table-cell</span> </div> </fieldset> <fieldset> <legend>inline-block</legend> <div class="iblock wrapper"> <span class="cell">table-cell</span> </div> </fieldset>
的边框
inline-block
不会与内部单元格的边框折叠:.wrapper, .cell { border-collapse: collapse; border: 5px solid #000; } .itable { display: inline-table; } .iblock { display: inline-block; } .cell { display: table-cell; }
<fieldset> <legend>inline-table</legend> <div class="itable wrapper"> <span class="cell">table-cell</span> <span class="cell">table-cell</span> </div> </fieldset> <fieldset> <legend>inline-block</legend> <div class="iblock wrapper"> <span class="cell">table-cell</span> <span class="cell">table-cell</span> </div> </fieldset>
回答by j.j.
Here are relevant differences in practice. Run the code snippet to see it at first glance.
以下是实践中的相关差异。运行代码片段,一目了然。
- Vertical alignment of surrounding text:
inline-table
elements align with its top cell or top baseline (if content is only multiple lines of text).
Text aroundinline-box
aligns with its bottom. height
works different, e.g.height
is probably not as you expect on<table style=display:inline-block>
(see test5and 6)width
and overflow works different,
e.g. setting width smaller than content, see test7, 8, 9, 10
- 周围文本的垂直对齐:
inline-table
元素与其顶部单元格或顶部基线对齐(如果内容只是多行文本)。
周围的文字inline-box
与其底部对齐。 height
工作方式不同,例如height
可能不像您期望的那样<table style=display:inline-block>
(参见test5和6)width
和溢出的工作方式不同,
例如设置宽度小于内容,参见test7, 8, 9, 10
<style> table, span { background:orange } th, td { background:beige } </style>
test1
<span style=display:inline-block>
display <br> inline <br> block
</span>
test2
<span style=display:inline-table>
display <br> inline <br> table
</span>
test3
<table style=display:inline-block>
<tr><th> inline
<tr><td> block
</table>
test4
<table style=display:inline-table>
<tr><th> inline
<tr><td> table
</table>
test5
<table style=display:inline-block;height:6em>
<tr><th> inline
<tr><td> block
</table>
test6
<table style=display:inline-table;height:6em>
<tr><th> inline
<tr><td> table
</table>-
<br>
test7
<span style=display:inline-block;width:1.4em>
block
</span>
test8
<span style=display:inline-table;width:1.4em>
table
</span>
test9
<table style=display:inline-block;width:1.4em>
<tr><th> inline
<tr><td> block
</table>
test10
<table style=display:inline-table;width:1.4em>
<tr><th> inline
<tr><td> table
</table>
test11
<table style=display:inline-block;width:5em>
<tr><th> inline
<tr><td> block
</table>
test12
<table style=display:inline-table;width:5em>
<tr><th> inline
<tr><td> table
</table>
-