在导航栏中实现搜索栏？

Question

我目前有一个（而且我希望它是）居中的导航栏。然而，在完成我的网站的整个过程中，我完全忘记了添加搜索栏。我决定使用 W3Schools 的代码将搜索栏合并到我的导航栏右侧，而不影响任何导航栏文本（家庭、游戏、办公室、结帐、联系人），并且与我的导航栏位于同一行。我将如何实现这一目标？

这是我的标题：

  <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

您可以为您的导航栏设置位置：相对，为您的搜索栏设置位置：绝对。然后，您可以使用 right 和 top 定位您的搜索栏，而无需更改您的链接。

Answer 2

对于您的导航栏元素，我建议使用

letter-spacing: (x)px

而不是在 HTML 中的元素内使用空格。此外，您应该将带有类导航栏的 <div> 更改为 <nav> 元素（两者都更适合 SEO）

回答您的问题： 这可以通过将搜索栏移动到导航栏容器中来实现：

HTML：

<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 class="searchbar">
        <input type="text" placeholder="Search..">
      </div>
      </div>



    </div>

  </header>

接下来，我们要在容器上使用position: relative，然后在需要定位的元素上使用position: absolute，在本例中是搜索栏。

CSS：

.navbar{
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
  position: relative; /* add this */
}

input[type=text]{
  width: 200px;
  bottom: 0; /* add this */
  right: 0; /* add this */
  position: absolute; /* add this */
}

完整的 JSFiddle： https://jsfiddle.net/kpLbgou8/

Answer 3

我用 flex 给你你的结果。由于文本太大，我还将断点移至 1200。这是 CSS：

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

.navbar input[type="text"] {
  padding: 6px;
  border: none;
  font-size: 17px;
  width: 100%;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 1rem;
}
.navlinks {
  width: 70%;
  margin: 0 auto 0 0;
  display: flex;
  flex-direction: row;
  font-size: 2rem;
  justify-content: space-between;
  text-transform: uppercase;
  text-align: center;
}

.navlinks a {
  transition: 0.5s;
  opacity: 20%;
  color: white;
  z-index: 2000;
  text-decoration: none;
  padding: 0.5rem 0;
}
.navlinks a:hover {
  transition: 0.5s;
  opacity: 100%;
}
.searchbar {
  width: 15%;
}

@media screen and (max-width: 1200px) {
  .navlinks {
    display: flex;
    width: 100% !important;
    flex-direction: column;
    padding: 0 1rem;
  }
  .searchbar {
    width: 100% !important;
  }
  .navbar {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}


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

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;
}

这里还有一个codesandbox

我删除了一些 css，以便我可以看到我在做什么，所以你必须把它放回去..