HTML与CSS问题：顶部导航栏右侧元素被挤出容器下方

问题背景 #

为OpsWeb运维工具的顶部导航栏（.navbar-schedule）中间添加4个按钮后，右侧的下拉菜单与按钮被挤到导航栏下方，布局错乱，调整CSS未解决问题。

相关代码 #

HTML结构 #

<nav class="navbar navbar-default navbar-schedule">
  ...
  <div class="container-fluid">
    <div class="navbar-left" role="group" aria-label="nav-buttons">
      <button type="button" class="btn btn-default navbar-btn" id="btnNow">...</button>
      <button type="button" class="btn navbar-btn" id="btnLive">...</button>
      <button type="button" class="btn navbar-btn btn-default" id="btnSim">...</button>
      <button type="button" class="btn navbar-btn" id="btnEdit">...</button>
    </div>

    <div class="navbar-center">
      <!-- 新增的4个按钮 -->
    </div>

    <div class="nav navbar-nav navbar-right">
      <mat-form-field id="configuration-selector">...</mat-form-field>
      <!-- 另外2个按钮 -->
    </div>
  </div>
</nav>

<div #gantt id="gantt-container"></div>

当前CSS（关键部分） #

.navbar-schedule {
  font-size: 15px;
  background-color: #CFD8DC;
  border-width: 0;
  border-style: none;
  border-radius: 0;
  margin-left: -15px;
  margin-right: -15px;
  height: 3.5em;
  min-height: 3.5em;
}

.navbar-schedule .navbar-left {
  height: 3.5em;
}

.navbar-schedule .navbar-center {
  height: 3.5em;
  margin-left: 50em;
}

.navbar-schedule .navbar-right {
  height: 3.5em;
}

.navbar-schedule .navbar-nav {
  height: 3.5em;
}

问题原因 #

1. 导航栏容器未使用弹性布局，三个区域（左、中、右）默认无法自适应分配水平空间
2. .navbar-center硬编码了margin-left:50em，占用过多固定宽度，导致右侧区域剩余空间不足，被迫换行

修复方案 #

修改CSS，给导航栏容器启用弹性盒布局，让三个区域在同一行自适应排列：

/* 给容器启用flex布局，垂直居中对齐内部元素 */
.navbar-schedule .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* 让左、中、右三个区域都使用flex布局，垂直居中内部按钮 */
.navbar-schedule .navbar-left {
  display: flex;
  align-items: center;
  height: 100%;
}

.navbar-schedule .navbar-center {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0; /* 移除硬编码的margin-left */
}

.navbar-schedule .navbar-right {
  display: flex;
  align-items: center;
  height: 100%;
}

额外优化（可选） #

如果需要中间区域严格居中，可调整容器的justify-content属性，同时给左右区域设置自动外边距：

.navbar-schedule .container-fluid {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.navbar-schedule .navbar-left {
  margin-right: auto;
}

.navbar-schedule .navbar-right {
  margin-left: auto;
}

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