CSS如何实现左侧区块垂直对齐排列 符合设计稿展示要求

解决方案 #

问题根因 #

你当前仅给.subnav设置了绝对定位，但缺少两个必要配置：

1. 父级<li>没有设置相对定位，导致.subnav的定位基准不是父元素，而是更上层的文档节点，位置出现偏移
2. 没有给绝对定位的.subnav设置对齐偏移规则，无法实现底部对齐的效果

调整后的代码 #

CSS部分

/* 给subnav的父级li设置相对定位，作为定位基准 */
#nav li {
  position: relative;
  list-style: none; /* 可选项，去掉列表默认圆点 */
}

#nav .subnav {
  position: absolute;
  bottom: 0; /* 核心规则：强制subnav底部和父元素li底部完全对齐 */
  left: 100%; /* 让subnav紧贴父元素右侧展示，可根据需要调整间距 */
  margin: 0;
  padding: 0;
  display: flex; /* 子项横向排列，符合设计稿的水平布局要求 */
}

/* 可选优化：统一所有导航项高度，对齐更精准 */
#nav a {
  display: block;
  height: 40px; /* 替换为你实际使用的导航高度 */
  line-height: 40px;
  padding: 0 15px;
}

HTML部分无需修改，沿用你现有代码即可。

效果验证 #

调整后父级li和子菜单的定位基准统一，bottom: 0会强制所有区块的底部边缘完全重合，符合设计稿的对齐要求。如果存在水平间距偏差，调整left属性的数值即可。

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