Question

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

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

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

Answer 1

最终，这取决于用例：

display: inline-block将创建inline-block元素
display: table将创建table元素

他们正在使用中：

＆＃13;

span.mySpan {
  background-color: red;
}

＆＃13;

<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>

＆＃13;

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

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

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

在某些情况下，display: table很有用：

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

但是，如果未正确实现，浏览器可能会产生不一致的结果，因此您应始终将display: table与标准表标记（使用行和单元格）耦合：

＆＃13;

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

＆＃13;

<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>

＆＃13;

这变得相当繁琐。使用现代CSS，我们可以使用display: flex完成相同的操作，使用更简单的HTML结构和更少的CSS：

＆＃13;

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

＆＃13;

<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>

＆＃13;

老实说，我不能多次想到我需要在display: inline-block和display: table之间做出决定，因为它们产生了不同的结果。但是，如果我站在栅栏上，我就会遵循这个决策树：

我需要做一张桌子吗？使用真正的<table></table>元素
我需要相同的高度/宽度元素和/或垂直居中吗？使用display: flex元素
否则，请使用适当的HTML元素（display: inline-block）

display：inline-block vs display：table（no display：table-cell）

1 个答案: