如何对齐嵌套列表项？页面顶部下拉菜单元素边缘对齐问题求助

问题原因 #

下拉菜单出现对齐偏差，核心问题在于：

• 下拉子菜单（.dropdown ul）未设置正确定位，默认占据文档流空间，且继承了ul的默认内边距/外边距
• 父项（.main-nav li）设置了左右5%的padding，但子项未匹配该宽度与对齐规则

修复方案 #

添加并修改以下CSS规则：

/* 让下拉菜单相对于父项定位 */
.dropdown {
  position: relative;
}

/* 绝对定位下拉子菜单，对齐父项边缘 */
.dropdown ul {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none; /* 移除默认列表符号 */
}

/* 子菜单链接占满整行，匹配父项交互区域 */
.dropdown ul li a {
  display: block;
  font-size: .6em;
  padding: 1em; /* 和父项链接padding保持一致 */
}

同时移除原有代码中.dropdown ul a的display: inline-block设置，避免样式冲突。

修改后的完整CSS代码 #

@font-face {
  font-family: "Chivo Mono";
  src: url("Resource/Fonts/ChivoMono-Black.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
  font-family: 'Trebuchet MS';
  color: #777;
}

html,
body {
  margin: 0;
  padding: 0;
}

.emails {
  height: 100px;
  width: 250px;
}

.nav li {
  display: inline-block;
}

.header {
  background-color: #A7C7E7;
  background-size: cover;
  padding-bottom: 40px;
  margin-bottom: 20px;
}

.nav a {
  display: inline-block;
  padding: 1em;
  color: white;
  text-decoration: none;
}

.nav a:hover {
  background-color: rgba(255, 150, 190, 1);
}

.main-nav {
  text-align: center;
  font-size: 1.7em;
  border-bottom: 3px solid rgba(255, 150, 190, 1);
}

.main-nav li {
  padding: 0 5%;
}

.page-name {
  text-align: center;
  margin: 0;
  font-size: 4em;
  font-family: "Chivo Mono";
  font-weight: normal;
  color: rgba(255, 150, 150, 1);
}

.footer {
  background-color: #A7C7E7;
  margin: 50px 0px;
  padding: 50px 0px;
  border: white;
}

.footer h1 {
  padding: 0px 0px;
}

.footer textarea {
  margin-top: 2em;
  width: 400px;
  height: 200px;
}

.body-text {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5em;
}

.footer {
  text-align: center;
  margin-top: 10em;
  margin-bottom: 0em;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.email-button {
  padding: 1em;
}

.article-title h2 {
  text-align: center;
  color: Black;
}

.coming-soon {
  color: white;
}

.nav li {
  color: white;
}

.email-button button {
  background-color: rgba(255, 150, 190, 1);
  color: white;
  padding: 7px 20px;
  font-size: 1.3em;
  border-radius: 10px;
  border: 0px;
  transition-duration: 0.9s;
}

.button:hover {
  background-color: white;
  color: #A7C7E7;
}

/* 新增下拉菜单定位规则 */
.dropdown {
  position: relative;
}

.dropdown ul {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
}

.dropdown ul li a {
  display: block;
  font-size: .6em;
  padding: 1em;
  background-color: rgba(255, 150, 190, 1);
  text-align: center;
}

p {
  text-align: center;
}

效果说明 #

• 通过relative+absolute定位组合，让下拉菜单固定在父项下方，不会打乱原有页面布局
• 重置ul默认样式，确保子菜单与父项边缘完全对齐
• 子菜单链接设置为块级元素并继承父项padding，保持交互区域一致性

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