CSS如何实现菜单中Services、About项的垂直向上对齐

你之前反复调试都不生效，本质是两个问题叠加导致的：

• 表格布局的层级完全写反了：标准表格布局的逻辑是「外层容器设为table → 行容器设为table-row → 单个单元格设为table-cell」，你现在直接把ul#menu设为display: table-row，上面没有对应的table级父容器，哪怕浏览器自动补全了匿名的表格盒子，垂直对齐的计算逻辑也是乱的，怎么调参数都不对。
• 对齐属性的方向和需求反了：你给所有li设置的vertical-align: bottom是强制让所有单元格内容贴在单元格最底部，就算你给Services、About这两个文本li设再小的高度，整个菜单行的高度永远由最高的那个li（也就是放40px高logo的项）撑着，bottom对齐会永远把文本往单元格最底下推，根本不可能靠上对齐。
• 额外踩了个坑：li.elements里写的height: 10px在table-cell布局里是完全无效的——表格的行高是整行所有单元格共享的，单个单元格设固定高度不会改变行的总高度，纯纯无效代码。

1. 修正表格布局层级
   把ul#menu原来的display: table-row替换为display: table，让ul本身充当整个菜单的表格容器，和下面作为单元格的li形成匹配的结构，保证垂直对齐属性可以正常计算。
2. 对齐方向改对
   把ul#menu li里的vertical-align: bottom改成vertical-align: top，这样所有单元格的内容都会从单元格顶部开始排布，自然和最高的logo项保持向上对齐。
3. 清理无效代码
   删掉li.elements里不生效的height: 10px，如果需要微调Services、About和logo的顶部间距，直接给.elements类加padding-top值就行——因为已经是顶对齐，调整这个值不会打乱整体布局。

替换后的完整CSS代码 #

ul#menu {
  background-color: #f8f8f8;
  display: table;
  width: 100%;
}

ul#menu li {
  display: table-cell;
  width: 100px;
  padding-left: 5px;
  vertical-align: top;
}

ul#menu li:last-child {
  border-right: 0px;
}

/* 按需微调文本菜单项的顶部间距，数值可以根据实际设计稿改 */
ul#menu li.elements {
  padding-top: 8px;
}

原来的HTML代码不需要做任何修改，替换上面的CSS就能实现Services、About两个菜单项和logo的垂直向上对齐。

内容的提问来源于stack exchange，提问作者user2909180