5

在元素上使用 CSSdisplay:table-cell时，它的父元素是否以某种方式首选/要求具有display:table-row, 和display:table？

这可以单独存在于文档中吗？

<div style="display:table-cell;">content</div>

或者以表格标签的方式，我应该嵌套一些具有适当样式的附加父标签吗？

<style>
.table {display:table;}
.tr {display:table-row;}
.td {display:table-cell}
}
</style>
<div class="table">
  <div class="tr">
    <div class="td">content</td>
  </div>
</div>

使用 display:table-cell 是在同一行上布置元素的一个好技巧（特别是因为它们之间没有呈现空白）但我想知道它是否只是这样：一个技巧。我可以期望这种行为在未来的某个时候会改变吗？

这在风格上不正确吗？它似乎在所有（现代）浏览器中一致显示（IE7 及更低版本不支持display:table-cell）

<style>
.cell {
  display:table-cell;
  padding:0px 5px;
  background-color:#aaaaaa;
}
</style>
<div>
  <span class="cell">option one</span>
  <span class="cell">option two</span>
  <span class="cell">option three</span>
</div>
4

1 回答 1

9

无论哪种方式，您都可以自由选择。如果未提供 table 和 table-row 元素，则会为您插入匿名元素（只要浏览器遵循 W3C 规范）。

http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

任何表格元素都会在其自身周围自动生成必要的匿名表格对象，由至少三个嵌套对象组成，分别对应一个 'table'/'inline-table' 元素、一个 'table-row' 元素和一个 'table-cell' 元素.

请记住，匿名元素无法设置样式。这只是一个问题，如果您的表格单元格元素中没有足够的内容让它们占据其父级宽度的 100%。在这种情况下，只需要一个表格元素，您可以删除表格行。

于 2013-04-20T14:23:46.293 回答