将搜索栏实现为导航栏？

Question

我目前有一个navbar是（我更希望它是）居中的。然而，在整个完成我的网站我完全忘记了添加一个搜索栏。我决定使用W3Schools中的代码将搜索栏合并到我的navbar的右侧，而不影响任何navbar文本（主页、游戏、办公室、结帐、联系人），并且与我的navbar在同一行上。我该如何做到这一点呢？

这是我的标题：

  <header>
    <div class="number2">
    </div>

    <div class="navbar">
      <div class="navlinks">
        <ul>
          <li><a href="index.html">H o m e</a></li>
          <li><a href="gaming.html">G a m i n g</a></li>
          <li><a href="office.html">O f f i c e</a></li>
          <li><a href="checkout.html">C h e c k o u t</a></li>
          <li><a href="contacts.html">C o n t a c t s</a></li>

      </div>
      <div class="searchbar">
        <input type="text" placeholder="Search..">
      </div>


    </div>

  </header>

标题和搜索栏的CSS代码：

/* Style the search box inside the navigation bar */


.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
}

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

input[type=text]{
  width: 200px;
  float: left;
  position: absolute;

}

@media screen and (max-width: 600px) {
  input[type=text]{
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
}

/*---------END CART ITEMS------------*/

.navlinks{

}

.navlinks ul li:hover{

  transition: .5s;
  opacity: 100%;
}

.navlinks ul li{
  transition: .5s;
  opacity: 20%;
  font-size: 2rem;
}

.img1{
  background-image: url(./assets/background/above.png);

}

.img1 .ple img{
  width: 700px;
  margin-bottom: -200px;

}


body { padding: 0; margin: 0; }


.navlinks li a{
  padding-top: 20px;
  padding-bottom: 20px;
  text-transform: uppercase;

}
.navlinks a{
  color: white;
  z-index: 2000;
  text-decoration: none;
  text-align: center;
  display:inline-block;

}

.navbar li{
      display:inline;
}

.navbar{

  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}



header {
  background-color: #16161e;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:#16161e;
}

li {

}

li a {
  display: block;
  color: white;

  padding: 14px 16px;
  text-decoration: none;

}

li a:hover {
  background-color: #111;
  transition: 0.5s;

}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

*, ::after, ::before {
    box-sizing: border-box;
}

到目前为止是这样的：

Answer 1

您可以为您的导航栏设置位置：相对位置，为您的搜索栏设置位置：绝对位置。然后，您可以定位您的搜索栏使用右和顶部而不改变您的链接。