我的搜索栏不能移动到导航栏的右边

Question

我的搜索栏不能移动到导航栏的右边。这是我的html代码和css。我发现如果我在CSS中去掉display: flex；，搜索栏就会向右移动，而剩下的按钮就会变得很奇怪。我不知道怎么修好它。

​

body * {
  box-sizing: border-box;
}

header,
header nav {
  width: 100%;
}

header nav {
  position: fixed;
  background-color: #fefefe;
  border-bottom: 1px solid #bbb;
  box-shadow: 0 0 1rem 0 rgb(0, 0, 0, .5);
  z-index: 5;
}

header nav,
header nav ul,
header nav ul>li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

header nav ul {
  list-style-type: none;
}

header nav ul>li {
  position: relative;
}

header nav ul>li:hover ul {
  top: 100%
}

header nav ul li a,
header nav ul li a:visited {
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
  color: #000;
  text-decoration: none;
}

header nav ul li a:hover {
  color: #76323f;
}

header nav ul>li>ul {
  position: absolute;
  top: -400%;
  left: 0;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 0 0.5rem 0.3rem 0 rgb(0, 0, 0, 0.2);
  transition: top .5s ease;
  z-index: -1;
}

header nav ul>li>ul>li>a {
  width: 100%;
  background-color: #fefefe;
  border-bottom: 1px solid #bbb;
  white-space: nowrap;
}


/* Dit is CSS voor mijn searchbar */

.search {
  float: right;
  padding: 1.2%;
  width: 23%;
  border: none;
  background-color: #eeeeee;
  margin-top: 0%;
  margin-right: -30%;
  font-size: 120%;
}

<header>
  <nav>
    <ul>
      <li><a href="index.html">Homepage</a></li>
      <li><a href="talen.html">Programmeer talen</a></li>
      <li><a href="vakken.html">Andere vakken</a>
        <ul>
          <li><a href="...">Databases</a></li>
          <li><a href="...">Versiebeheer</a></li>
          <li><a href="...">Netwerkbeheer</a></li>
        </ul>
      </li>
      <li><a href="aboutme.html">Over mij</a>
        <ul>
          <li><a href="...">About me</a></li>
          <li><a href="...">My goals and progress</a></li>
          <li><a href="...">My motivation</a></li>
        </ul>
      </li>
    </ul>
    <input class="search" type="text" id="searchBar" onkeyup="mySearchBar()" placeholder="Zoeken.." title="Type in a category">
  </nav>
</header>

​

Answer 1

这是你需要的吗？

​

body * {
  box-sizing: border-box;
}

header,
header nav {
  width: 100%;
}

header nav {
  position: fixed;
  background-color: #fefefe;
  border-bottom: 1px solid #bbb;
  box-shadow: 0 0 1rem 0 rgb(0, 0, 0, .5);
  z-index: 5;
}

header nav,
header nav ul,
header nav ul>li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

header nav ul {
  list-style-type: none;
}

header nav ul>li {
  position: relative;
}

header nav ul>li:hover ul {
  top: 100%
}

header nav ul li a,
header nav ul li a:visited {
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
  color: #000;
  text-decoration: none;
}

header nav ul li a:hover {
  color: #76323f;
}

header nav ul>li>ul {
  position: absolute;
  top: -400%;
  left: 0;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 0 0.5rem 0.3rem 0 rgb(0, 0, 0, 0.2);
  transition: top .5s ease;
  z-index: -1;
}

header nav ul>li>ul>li>a {
  width: 100%;
  background-color: #fefefe;
  border-bottom: 1px solid #bbb;
  white-space: nowrap;
}


/* Dit is CSS voor mijn searchbar */

.search {
  float: right;
  padding: 1.2%;
  width: 23%;
  border: none;
  background-color: #eeeeee;
  margin-top: 0%;
  font-size: 120%;
  margin-left: auto;
}

<header>
  <nav>
    <ul>
      <li><a href="index.html">Homepage</a></li>
      <li><a href="talen.html">Programmeer talen</a></li>
      <li><a href="vakken.html">Andere vakken</a>
        <ul>
          <li><a href="...">Databases</a></li>
          <li><a href="...">Versiebeheer</a></li>
          <li><a href="...">Netwerkbeheer</a></li>
        </ul>
      </li>
      <li><a href="aboutme.html">Over mij</a>
        <ul>
          <li><a href="...">About me</a></li>
          <li><a href="...">My goals and progress</a></li>
          <li><a href="...">My motivation</a></li>
        </ul>
      </li>
    </ul>
    <input class="search" type="text" id="searchBar" onkeyup="mySearchBar()" placeholder="Zoeken.." title="Type in a category">
  </nav>
</header>

​

Answer 2

所以我所做的是，我删除了你的"align-items: flex-start“。在你的.search css中，我也做了一些修改。对我来说，这个css运行得很好：

.search {
  margin-left: auto;
  padding: 1.2%;
  width: 23%;
  border: none;
  background-color: #eeeeee;
  margin-top: 0%;
  font-size: 120%;
}