CSS实现导航栏分两行 如何将搜索选择器模块放在首页链接下方

解决方案 #

你用了flex布局的flex-wrap: wrap属性，只需要让第一行的导航链接容器占满100%宽度，就能自动把搜索模块挤到第二行，具体修改如下：

1. 调整HTML结构

给第一行所有导航链接加一个父容器.navbar-links：

<div class="navbar">
  <!-- 新增导航链接父容器 -->
  <div class="navbar-links">
    <div class="navbar-item"><a href="#home">Home</a></div>
    <div class="navbar-item"><a href="#links">Links</a></div>
    <div class="navbar-item"><a href="#contact">Contact</a></div>
  </div>
  <div class="navbar-search">
    <select name="slct" id="my-slct">
      <option value="">--Please choose an option--</option>
    </select>
    <input type="submit" />
  </div>
</div>

2. 调整CSS代码

新增.navbar-links样式，同时调整搜索区和内容区的边距：

body {
  margin: 0;
}

.navbar {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

/* 新增导航链接容器样式 */
.navbar-links {
  display: flex;
  width: 100%;
}

.navbar-item {
  background-color: #333;
}

.navbar-search {
  background-color: #333;
  /* 调整内边距和上方导航链接对齐 */
  padding: 0 16px 14px;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  /* 调整上边距，避免内容被两行导航遮挡 */
  margin-top: 60px;
  height: 1500px;
  /* Used in this example to enable scrolling */
}

修改后搜索模块就会自动出现在第一行导航的下方，对齐在Home链接的正下方位置。

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