html - 显示 : inline-block vs display: table (no display: table-cell)

Question

每当我希望元素的宽度与其内容相同时，我都使用了这两个display 属性。

但是一个比另一个好吗？我指的是可访问性、浏览器兼容性、响应能力等。

注意:我问是因为我打算在我的新网站中只使用其中一个。我只是不知道哪个更好，如果有的话。

Answer 1

最终，这取决于用例:

• display: inline-block将创建一个 inline-block元素
• display: table将创建一个 table元素

它们在这里使用:

span.mySpan {
  background-color: red;
}

<div>
  <span>A span element.</span>
  <span class="mySpan" style="display: table;">a <code>display: table</code> element.</span>
  <span>Another span element.</span>
</div>

<br/>
<br/>

<div>
  <span>A span element.</span>
  <span class="mySpan" style="display: inline-block;">a <code>display: inline-block</code> element.</span>
  <span>Another span element.</span>
</div>

可以看出，结果大不相同。 table元素将自身定位在新行上，并使下一个元素也位于新行上。 inline-block元素定位自身与其兄弟元素内联。

在许多情况下，上述差异足以选择其中之一。

如果没有，让我们继续......

有些情况下 display: table很有用:

• 元素的水平和垂直居中
• 等高元素

但是，浏览器在未正确实现时会产生不一致的结果，因此您应该始终耦合 display: table使用标准表格标记(使用行和单元格):

.table {
  display: table;
}

.table-row {
  display: table-row:
}

.table-cell {
  display: table-cell;
  background-color: #eaeaea;
  padding: 10px;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      Content
    </div>
    <div class="table-cell"  style="height: 100px;">
      Content
    </div>
    <div class="table-cell">
      Content
    </div>
  </div>
</div>

这变得非常乏味。使用现代 CSS，我们可以使用 display: flex 来完成同样的事情。 ，具有更简单的 HTML 结构和更少的 CSS:

.flex {
  display: flex;
}

.flex-cell {
  background-color: #eaeaea;
  padding: 10px; 
}

<div class="flex">
  <div class="flex-cell">
    Content
  </div>
  <div class="flex-cell" style="height: 100px;">
    Content
  </div>
  <div class="flex-cell">
    Content
  </div>
</div>

老实说，我想不出很多次我需要在 display: inline-block 之间做出决定。和 display: table因为它们产生如此不同的结果。但是，如果我犹豫不决，我会遵循这个决策树:

1. 我需要做一张 table 吗？使用真实的 <table></table>元素
2. 我是否需要等高/等宽的元素，和/或垂直居中？使用 display: flex元素
3. 否则，使用适当的 HTML 元素 ( display: inline-block )