如何用CSS让HTML元素（如Div）顶部精准对齐父元素底部

需求：让绿色边框的<ul>子元素从蓝色边框的父<div>底部开始显示，采用常规position: relative+position: absolute方案后未达到精准对齐效果。

现有测试代码 #

React组件代码

import './App.css';

function App() {
  return (
    <div className="App">
      <div className="d1">
        <ul className="ul1">
          <li className="li1">Home</li>
          <li className="li1">About</li>
          <li className="li1">Contact</li>
        </ul>
      </div>
    </div>
  );
}

export default App;

对应CSS代码

.App {
  border: 1px solid red;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.d1 {
  position: relative;
  border: 1px solid blue;
  margin: 10px;
  min-height: 80px;
  min-width: 100px;
}

.ul1 {
  border: 1px solid green;
  position: absolute;
  height: 80px;
  top: 100%;
}

问题分析 #

当前未精准对齐的核心原因：

• <ul>标签默认带有margin-top和padding-left，会导致子元素偏移父元素底部
• 未设置子元素的水平定位，导致宽度未和父元素匹配，视觉上出现错位

修正后的CSS方案 #

.App {
  border: 1px solid red;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.d1 {
  position: relative;
  border: 1px solid blue;
  margin: 10px;
  min-height: 80px;
  min-width: 100px;
}

.ul1 {
  border: 1px solid green;
  position: absolute;
  height: 80px;
  top: 100%;
  /* 重置ul默认边距和内边距 */
  margin: 0;
  padding: 0;
  /* 水平对齐父元素 */
  left: 0;
  width: 100%;
  /* 可选：让列表项横向排列并去掉默认圆点 */
  display: flex;
  list-style: none;
}

关键修改说明 #

1. 重置ul默认样式：添加margin: 0; padding: 0;，消除浏览器默认样式带来的偏移
2. 水平定位对齐：设置left: 0; width: 100%;，让子元素宽度和父元素完全匹配，避免视觉错位
3. 可选优化：添加display: flex; list-style: none;，让列表项横向排列并去掉默认圆点，更贴近常见导航样式

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