使用嵌套 table-cell 时的奇怪行为

Question

我创建了一个水平菜单，但当其中一个单元格的内容比其他单元格大时，我遇到了问题。

为了看看会发生什么，我编辑了 2 个 JSFiddle 以便您观察问题：

JSFiddle with equal content

JSFiddle with one of the cell larger than others

我在 display : table 中使用了 ul，在 display : table-cell 中使用了 li，在 display : table-cell.[=19 中的 li 中使用了 link 标签=]

我不明白为什么代表 link 标签的嵌套 table 单元格在内部内容比其他单元格大时会在顶部添加一个奇怪的 space。

有人能指出我正确的方向吗？如果需要，请随意完全更改 css，唯一的要求是保持标签层次结构，因为我使用 Wordpres wp_menu_nav() 函数，它给我这个输出。

Answer 1

这是一个 Chrome 错误，违反了 CSS tables spec:

vertical-align: baseline: The baseline of the cell is put at the same height as the baseline of the first of the rows it spans

The baseline of a cell is the baseline of the first in-flow line box in the cell, or the first in-flow table-row in the cell, whichever comes first. If there is no such line box or table-row, the baseline is the bottom of content edge of the cell box.

li 个元素是 table-cell 个，默认为 vertical-align: baseline。它们包含一个 a table-cell，包裹在匿名 table-row 和 table 中。所以 a 的第一行应该对齐，但似乎 Chrome 似乎对齐最后几行。

您可以使用

修复它

#menu > li {
  vertical-align: middle;
}

body {
  margin: 0px;
}
#menu {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: table;
  width: 100%;
  height: 80px;
}
#menu > li {
  display: table-cell;
  height: 80px;
  width: calc(100% / 6);
  border: solid 1px black;
  box-sizing: border-box;
  vertical-align: middle;
}
#menu > li > a {
  display: table-cell;
  height: 80px;
  width: calc(100% / 6);
  background: lightgrey;
  vertical-align: middle;
  box-sizing: border-box;
}

<ul id="menu">
  <li><a href="">first link</a></li>
  <li><a href="">Second link</a></li>
  <li><a href="">Third link</a></li>
  <li><a href="">Fourth link</a></li>
  <li><a href="">Fifth link</a></li>
  <li><a href="">Sixth link Sixth link Sixth link</a></li>
</ul>

Answer 2

这是决心。 https://jsfiddle.net/akysrs3t/7/

body {
  margin : 0px;
}

#menu {
  list-style-type : none;
  margin : 0px;
  padding : 0px;
  display : table;
  width : 100%;
  table-layout: fixed; /* makes the with distribute equally amongst the items of the menu */
}

#menu > li {
  display : table-cell;
  border : solid 1px black;
  box-sizing : border-box;
  vertical-align : middle;
  text-align: center;
}

#menu > li > a {
  display : block;
  height: 80px;
  line-height: 80px;
  background : lightgrey;
}

您可以通过 JSFiddle 查看示例中的结果。看看 table-layout: 的值。

你真的不需要 calc()。

最佳，乔治

使用嵌套 table-cell 时的奇怪行为

Weird behaviour when using nested table-cell

html

css

wordpress

tablecell