如何使用CSS实现导航栏列表元素水平排列

问题原因 #

1. 外层容器自带justify-content-center类默认居中对齐，你仅设置display:flex没有修改对齐规则，所以只能部分调整位置
2. 列表容器<ul>使用的Bootstrap内置navbar-nav类默认是垂直排列逻辑，flex-direction属性值为column，这是列表项无法水平排列的核心原因

解决方案 #

有两种实现方式，按需选择即可：

方式1：直接修改HTML（无需额外写CSS）

• 把外层<div>的justify-content-center类替换为justify-content-start
• 给<ul>标签新增flex-row类
  修改后的HTML关键部分示例：

<div class="w-100 justify-content-start p-xl-0 border-bottom">
  <div class="collapse navbar-collapse" id="uwp-profile-tabs-nav">
    <ul class="navbar-nav flex-row flex-wrap m-0 list-unstyled">
      <!-- 原有li内容保持不变 -->
    </ul>
  </div>
</div>

方式2：新增CSS规则（无需修改原有HTML）

/* 覆盖外层容器默认居中逻辑，改为靠左对齐 */
div.w-100.justify-content-center {
  justify-content: flex-start !important;
}
/* 修改列表默认垂直排列逻辑为水平排列 */
ul.navbar-nav {
  flex-direction: row !important;
  /* 可自定义调整两个导航项的间距，单位按需修改 */
  gap: 1.5rem;
}

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