如何用Flexbox和Grid布局在导航栏中放置元素？仅用HTML和CSS

要实现导航栏左侧菜单、右侧搜索栏垂直居中的效果，通过Flex布局即可完成，具体调整如下：

1. 修正HTML语义结构 #

<ul>的直接子元素必须为<li>，先将搜索栏容器放入<li>标签内：

<nav>
  <ul>
    <li>
      <a href="#">Programmes</a>
    </li>
    <li>
      <a href="#">Actualités</a>
    </li>
    <li>
      <a href="#">Jeune Public</a>
    </li>
    <li>
      <a href="#">Tarifs</a>
    </li>
    <li>
      <a href="#">Accés</a>
    </li>
    <!-- 将搜索容器包裹在li中，符合ul的语义规范 -->
    <li class="search-li">
      <div class="form-container">
        <form class="form" action="#">
          <input type="text" placeholder="Rechercher" />
        </form>
      </div>
    </li>
  </ul>
</nav>

2. 调整Flex布局样式 #

修改导航栏CSS，实现垂直居中并将搜索栏推至右侧：

/* Navbar */
nav {
  background-color: #ae2123;
}

ul {
  display: flex;
  align-items: center; /* 让所有子元素垂直居中对齐 */
  justify-content: flex-start; /* 菜单默认靠左排列 */
}

/* 利用margin-left:auto将搜索栏li推至右侧 */
.search-li {
  margin-left: auto;
  padding-right: 25px; /* 和左侧菜单内边距保持一致，视觉更协调 */
}

a {
  display: block;
  padding: 15px 25px;
  text-align: center;
  color: #fff;
}

a:hover {
  color: #999;
}

input {
  padding: 5px 20px;
  border-radius: 20px;
}

效果说明 #

• align-items: center 确保导航栏内所有元素在垂直方向上居中，匹配导航栏高度；
• margin-left: auto 是Flex布局的常用技巧，会自动填充元素左侧的剩余空间，将搜索栏推至容器最右侧；
• 添加padding-right是为了避免搜索栏紧贴导航栏边缘，和左侧菜单的内边距保持视觉统一。

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