如何实现导航栏（Navbar）ul列表项垂直对齐并单行显示？

问题原因 #

• 你使用float布局排列元素，但float对空间分配的容错性低，再加上h6标签默认带有外边距，ul又设置了固定高度70px，当元素垂直空间不足或横向总宽度超出容器时，就会出现元素下移的情况。
• 浏览器默认给ul添加了左侧内边距（padding-left），挤占了导航项的可用宽度，进一步加剧了换行问题。
• 固定定位的.navigation-bar未设置宽度，默认仅包裹内容，导致导航项的横向排列空间被限制。

修复方案（改用Flex布局，更稳定可控） #

修复后的HTML #

<div class="navigation-bar">
  <img src="assets/shared/logo.svg" alt="Logo">
  <ul>
    <li>
      <a href="#">
        <h6><strong>03  </strong>TECHNOLOGY</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>02  </strong>CREW</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>01  </strong>DESTINATION</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>00  </strong>HOME</h6>
      </a>
    </li>
  </ul>
</div>

修复后的CSS #

/* 全局重置默认样式，消除浏览器自带margin/padding的干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navigation-bar {
  position: fixed;
  z-index: 1;
  width: 100%; /* 让导航栏占满全屏宽度 */
  display: flex;
  align-items: center; /* 垂直居中对齐logo和导航栏 */
  justify-content: space-between; /* logo居左，导航项居右 */
  padding: 0 20px; /* 左右留白，避免元素贴边 */
}

.navigation-bar img {
  height: 40px;
  width: 40px;
}

.navigation-bar ul {
  display: flex; /* 用flex排列导航项，替代float */
  gap: 30px; /* 导航项之间的间距，可按需调整 */
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px);
  padding: 0 20px;
  height: 70px;
  align-items: center; /* 导航项在导航栏内垂直居中 */
}

.navigation-bar li {
  list-style-type: none;
}

/* 移除h6默认外边距，避免占用垂直空间 */
.navigation-bar h6 {
  margin: 0;
}

关键调整说明 #

• 用Flex布局替代float：Flex是现代CSS布局方案，能精准控制元素的对齐、排列逻辑，彻底解决float带来的排版溢出问题。
• 全局样式重置：消除浏览器默认样式的干扰，确保布局不受隐性边距/内边距影响。
• 给导航栏设置全屏宽度：固定定位元素默认宽度由内容决定，设置width:100%后，导航项有足够横向空间排列。
• 垂直居中对齐：通过align-items:center确保导航项在固定高度的导航栏内垂直居中，避免偏移。

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