60

私が知る限り、これらのdisplayセレクターは同一のようです。

Mozilla CSS ドキュメントから:

inline-table: inline-table 値は、HTML に直接マッピングされていません。HTML 要素のように動作し<table>ますが、ブロック レベルのボックスではなく、インライン ボックスとして動作します。テーブル ボックス内には、ブロック レベルのコンテキストがあります。

inline-block: 要素は、単一のインライン ボックスであるかのように、周囲のコンテンツと共に流れるブロック要素ボックスを生成します (置き換えられた要素と同じように動作します)。

でinline-tableできることは でできるようinline-blockです。

4

3 に答える 3

88

inline-blockとの両方inline-tableが外側のディスプレイの役割を果たします。つまりinline

この要素は、インライン レベルのボックスを生成します。

違いは、

ただし、ほとんどの場合、無名のテーブル オブジェクトが原因で次のinline-tableように動作します。inline-block

欠落している子ラッパーを生成します。

  • 'table' または 'inline-table' ボックスの子 C が適切なテーブルの子ではない場合、C および適切なテーブルの子ではない C のすべての連続する兄弟を囲む匿名の 'table-row' ボックスを生成します。
  • 'table-row' ボックスの子 C が 'table-cell' でない場合、C の周りに匿名の 'table-cell' ボックスを生成し、'table-cell' ボックスではない C のすべての連続する兄弟を生成します。

したがって、inline-table要素に表形式以外のコンテンツがある場合、そのコンテンツは匿名でラップされtable-cellます。

と同じようにtable-cell、内側のディスプレイ モデルがあります。flow-root inline-block

ただし、inline-tableに表形式のコンテンツがある場合は、 とは異なる動作をしますinline-block。

いくつかの例：

  • 内ではinline-block、表以外のセパレーターを持つセルは異なるtable匿名の親を生成するため、異なる行に表示されます。内では、親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>

于 2013-10-14T01:09:35.817 に答える
24

display:tableタグをテーブルのように動作させます。 inline-tablejust は、要素がインライン レベルのテーブルとして表示されることを意味します。table-cellその後、要素を要素のように動作させることができます<td>。

display:inline- 要素をインライン要素 ( など<span>)として表示し、inline-blockそれらをブロック コンテナーにまとめてグループ化します。

他の回答が示唆しているように、コードの残りの部分で表示規則に従っている限り、2 つを置き換えることができます。(つまり、 と一緒に使用し、 と一緒に使用table-cellしinline-tableないでinline-blockください)。の詳細については、このリンクを
確認してください。display

于 2013-10-14T01:11:43.730 に答える