如何让链接列表与主文本高度匹配并适配其宽度？

链接列表的位置比主文本偏高，列表内容仅为占位符。我尝试给intro设置display:table;但没效果，自己不太擅长HTML和CSS，这是大学项目要求，所以来求助。

相关代码片段 #

CSS代码：

p {
  padding: 0 10px;
  background-color: rgba(255, 192, 247, 0.904);
  border: 3px solid lightskyblue;
  border-radius: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: white;
  text-shadow:  0px 0px 1px black;
}

#intro .introduction {
  width: 80%;
  float: left;
}

#intro .submenu {
  float: right;
  width: auto;
  height: inherit;
  background-color: aliceblue;
  padding: 0 10px;
  border: 3px solid lightskyblue;
  border-radius: 10px;
}

HTML代码：

<div id="intro">
    <div class="introduction">
        <p>
            main text is right here
        </p>
    </div>
    <div class="submenu">
       <nav>
           <ul>
              <li ><a class="active" href="index.html">Main page</a></li>
              <li><a href="course.html">Course</a></li>
              <li><a href="content.html">Contact</a></li>
           </ul>
            </nav>
    </div>
</div>

问题原因&修复方案 #

问题出在浮动布局的默认对齐逻辑：浮动元素默认向上对齐，而左侧<p>标签自带默认的上下外边距，导致主文本区域整体下移，对比之下右侧列表就显得偏高。

推荐用Flexbox布局替代浮动，更易控制对齐效果：

1. 给#intro添加Flex布局属性，让子元素垂直居中：

#intro {
  display: flex;
  align-items: center; /* 垂直居中子元素 */
  gap: 15px; /* 两个区块间的间距，可按需调整 */
}

2. 移除原来的浮动样式：

#intro .introduction {
  width: 80%;
  /* 删除 float: left; */
}

#intro .submenu {
  /* 删除 float: right; */
  width: auto;
  background-color: aliceblue;
  padding: 0 10px;
  border: 3px solid lightskyblue;
  border-radius: 10px;
}

额外优化：给列表去掉默认的边距和圆点，让样式更整洁：

.submenu ul {
  margin: 0;
  padding: 10px 0;
  list-style: none;
}

这样修改后，两个区块就能垂直居中对齐，解决列表偏高的问题。

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