求助：无法将搜索栏移至导航栏最右侧，求问题排查方案

问题分析 #

当前导航栏布局中，.nav-container设为inline-block，且未利用flex布局的空间分配特性，导致搜索栏无法自动对齐到最右侧。同时.navbar的text-align: center也会干扰元素的对齐逻辑。

修复方案 #

1. 调整HTML结构 #

将搜索表单从.navbar-nav中独立出来，作为.nav-container的直接子元素，利用flex布局实现左右分隔：

<nav class="navbar navbar-expand-lg fixed-top">
  <div class="nav-container">
    <!-- 左侧导航链接组 -->
    <div class="navbar-nav">
      <a class="nav-link" aria-current="page" href="{% url 'home' %}">Home</a>
      <a class="nav-link" href="{% url 'gallery' %}">Gallery</a>
      <a class="navbar-name" href="{% url 'home' %}">MARTIN HENSON PHOTOGRAPHY</a>
      <a class="nav-link" href="{% url 'blog' %}">Blog</a>
      <a class="nav-link" id="contact-nav-link" href="{% url 'contact' %}">Contact</a>
    </div>
    <!-- 右侧搜索表单 -->
    <form class="d-flex" method="POST" action="{% url 'searchblogs' %}">
      {% csrf_token %}
      <i class="fa fa-search"></i>
      <input type="text" class="form-control rounded-0" placeholder="Search keyword" name="searched">
      <button id="search-button" class="btn btn-primary-outline rounded-0">Search</button>
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</nav>

2. 更新CSS样式 #

修改容器布局规则，启用flex实现两端对齐：

.navbar {
  background: black;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) !important;
  width: 100%;
  padding: 0 20px; /* 可选：给导航栏左右添加内边距，避免内容贴边 */
}
.nav-container {
  width: 100%;
  display: flex;
  justify-content: space-between; /* 让子元素分别靠左右两端对齐 */
  align-items: center; /* 垂直居中对齐元素 */
  margin: 0 auto;
}
.navbar .navbar-nav {
  padding: 50px;
  display: flex;
  align-items: center;
}
.navbar-name {
  text-decoration: none;
  color: white;
  margin-left: 50px;
  margin-right: 50px;
}

核心修改说明 #

• 将.nav-container设为flex布局，通过justify-content: space-between分配左右空间
• 把搜索表单独立为容器的直接子元素，使其能被flex布局推到最右侧
• 移除.navbar的text-align: center，避免干扰flex布局的对齐逻辑

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