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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 14:25:43  来源:igfitidea点击:

What is the difference between inline-block and inline-table?

htmlcss

提问by Steve Barna

As far as I can tell, these displayselectors 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-tablecan be done with inline-block.

似乎inline-table可以用inline-block.

采纳答案by Quantico

display:tablewill make your tag behave like a table. inline-tablejust means that the element is displayed as an inline-level table. You can then do table-cellto 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-blockwill 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-cellwith inline-tableand not with inline-block).
Check this linkfor more info on display.

正如另一个答案所建议的那样,只要您遵循其余代码中的显示约定,您就可以在两者之间进行替换。(即使用table-cellwithinline-table和 not with inline-block)。
查看此链接以获取有关 的更多信息display

回答by Oriol

Both inline-blockand inline-tablehave an inlineouter display role. That means

双方inline-blockinline-table有一个外部显示器的作用。这意味着inline

The element generates an inline-level box.

该元素生成一个内联级 box

The difference is that

不同之处在于

However, in most cases, inline-tablewill behave like inline-blockbecause of anonymous table objects:

但是,在大多数情况下,inline-tableinline-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-tableelement has non-tabular content, that content will be wrapped in an anonymous table-cell.

因此,如果您的inline-table元素具有非表格内容,则该内容将被包装在一个匿名的table-cell.

And table-cellhas a flow-rootinner display model, just like inline-block.

并且table-cell有一个内显示模型,就像。flow-rootinline-block

But if the inline-tablehas 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 different tableanonymous parents, so they will appear at different lines. Inside an inline-table, it will be the separator who will generate a table-cellparent, 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-blockwon'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-tableelements align with its top cell or top baseline (if content is only multiple lines of text).
    Text around inline-boxaligns with its bottom.
  • heightworks different, e.g. heightis probably not as you expect on
    <table style=display:inline-block>(see test5and 6)
  • widthand 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>(参见test56
  • 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>
-