如何将导航栏标题与无序列表项调整为同一行对齐显示

API 探路者

2026-10-9

你需要给导航栏父容器#navbar设置Flex布局，统一控制子元素的排列和对齐，同时清理冗余的浮动属性即可实现标题和导航列表水平对齐：

修改要点

给#navbar添加Flex布局属性，设置垂直居中对齐，可根据需求调整左右间距
移除#list的float: left属性，避免浮动布局和Flex布局冲突
清除h3、ul的默认外边距/内边距，避免额外间距影响对齐效果

修改后完整代码

CSS代码

#navbar {
  display: flex;
  align-items: center; /* 垂直方向居中对齐 */
  justify-content: space-between; /* 左右两端对齐，标题在左、列表在右，可根据需求调整为flex-start/center等 */
  padding: 0 20px; /* 给导航栏加左右内边距，避免贴边 */
  /* 可保留你原有navbar的背景、高度等其他属性 */
}
#navbar h3 {
  color: gold;
  margin: 0; /* 清除h3默认上下外边距 */
  font-size: 24px; /* 可根据列表字体大小适配调整 */
}
#navbar ul li {
  list-style-type: none;
  padding: 20px;
  font-size: 20px;
  margin-right: 15px;
  border-radius: 15px;
}
#navbar ul li a {
  text-decoration: none;
  color: white;
}
#list {
  display: flex;
  margin: 0; /* 清除ul默认外边距 */
  padding: 0; /* 清除ul默认左内边距 */
  justify-content: space-around;
}

HTML代码（无需修改，保持原有结构即可）

<nav id="navbar" >
  <h3>PORTFOLIO</h3>
  <ul id="list">
    <li><a href="#">HOME</a></li>
    <li><a href="#">SKILLS</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</nav>

你可以通过修改#navbar的justify-content属性调整标题和列表的相对位置：