Question

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

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

JSFiddle with equal content

JSFiddle with one of the cell larger than others

我在ul中使用了display : table，在li中使用了display : table-cell，在display : table-cell中使用了li中的链接标记。

我不明白为什么表示链接标记的嵌套表格单元在内部内容大于其他单元格时会在顶部添加一个奇怪的空间。

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

Answer 1

这是Chrome错误，违反了CSS tables spec：

vertical-align: baseline ：单元格的基线位于   与其跨越的第一行的基线相同的高度

单元格的基线是单元格中第一个流入line box的基线，或单元格中的第一个流入表格行的基线，   以先到者为准。如果没有这样的线框或表格行，那么   baseline是单元格框内容边缘的底部。

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

您可以使用

进行修复

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

＆＃13;

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

＆＃13;

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

＆＃13;

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（）。

贝斯茨，乔治

使用嵌套表格单元格

2 个答案: