将元素移动到左侧和右侧 CSS

Question

这是证明我的问题的代码

.nav {
  background-color: #FFC000;
  text-align: center;
  display: flex;
  padding: 10px;
}

.nav a {
  flex: 1;
  display: block;
  color: white;
  text-decoration: none;
  font-size: 18px;
  margin: auto;
  border-radius: 4px;
  padding: 5px;
}

.nav form {
  flex: 5;
  line-height: 0px;
  margin: auto;
}

.nav form input {
  font-size: 15px;
  border: 1px solid grey;
  width: 80%;
  background: #f1f1f1;
  margin: auto;
  border-radius: 8px;
  padding: 5px;
}

.nav form button {
  width: 15%;
  background: #2196F3;
  color: white;
  font-size: 15px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
  margin: auto;
  border-radius: 8px;
  padding: 5px;
}

.nav form button:hover {
  background: #0b7dda;
}

.nav a:hover {
  background-color: #FAD5A5;
}

.nav .icon {
  display: none;
}


/* this is the media query */

@media (max-width: 768px) {
  .main {
    flex-direction: column;
  }
  .header {
    flex-direction: column;
  }
  .nav {
    flex-direction: column;
  }
  .nav form {}
  .nav a:not(:first-child) {
    display: none;
  }
  .nav a.icon {
    float: right;
    display: block;
  }
  .nav.responsive {
    position: relative;
  }
  .nav.responsive .icon {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .nav.responsive a {
    display: block;
    text-align: left;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet"/>
<div class="nav" id="myNav">
  <form>
    <input type="text" placeholder="Search.." name="search">
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>
  <a href="#home">Computations</a>
  <a href="#news">Strings</a>
  <a href="#contact">Arrays</a>
  <a href="#about">Encryption</a>
  <a href="#about">Games</a>
  <a href="#about">Converter</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

不要介意我正在测试的 html 中的 href。

我制作了一个 javascript，在您单击该栏后，其他元素将出现。请帮助我在不使用绝对位置的情况下将搜索栏和按钮向左移动，向右移动搜索栏。浮动也不起作用。这是图片。

Answer 1

你也可以将你的表单变成一个弹性容器：

.nav form {
  flex: 5;
  line-height: 0px;
  margin: auto;
  display:flex;
  gap:0.25em
}

然后最终，避免重置 flex-direction。

你的 sn-p 更新了修改：

.nav {
  background-color: #FFC000;
  text-align: center;
  display: flex;
  padding: 10px;
}

.nav a {
  flex: 1;
  display: block;
  color: white;
  text-decoration: none;
  font-size: 18px;
  margin: auto;
  border-radius: 4px;
  padding: 5px;
}

.nav form {
  flex: 5;
  line-height: 0px;
  margin: auto;
  display:flex;
  gap:0.25em
}

.nav form input {
  font-size: 15px;
  border: 1px solid grey;
  width: 80%;
  background: #f1f1f1;
  margin: auto;
  border-radius: 8px;
  padding: 5px;
}

.nav form button {
  width: 15%;
  background: #2196F3;
  color: white;
  font-size: 15px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
  margin: auto;
  border-radius: 8px;
  padding: 5px;
}

.nav form button:hover {
  background: #0b7dda;
}

.nav a:hover {
  background-color: #FAD5A5;
}

.nav .icon {
  display: none;
}


/* this is the media query */

@media (max-width: 768px) {
  .main {
    flex-direction: column;
  }
  .header {
    flex-direction: column;
  }
  .nav {
    /*flex-direction: column;*/
  }
  .nav form {}
  .nav a:not(:first-child) {
    display: none;
  }
  .nav a.icon {
    float: right;
    display: block;
  }
  .nav.responsive {
    position: relative;
  }
  .nav.responsive .icon {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .nav.responsive a {
    display: block;
    text-align: left;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet"/>
<div class="nav" id="myNav">
  <form>
    <input type="text" placeholder="Search.." name="search">
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>
  <a href="#home">Computations</a>
  <a href="#news">Strings</a>
  <a href="#contact">Arrays</a>
  <a href="#about">Encryption</a>
  <a href="#about">Games</a>
  <a href="#about">Converter</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>