我该如何解决我自己陷入的混乱局面，导航栏

Question

所以我在编码时把导航栏搞得一团糟，如果有人能修复它那就太好了！顺便说一句，我试图将搜索栏对准徽标右侧的一点，就像非常靠近它一样。搜索的热门符号不在中间，人的图标在右边！无法实现。

Codepen 让你更容易看到问题：https://codepen.io/hsohibnazar/pen/KKVoOdX

（免责声明：图标确实出现在我的网站上，但在 codepen 中，由于某些特殊原因没有出现 :/）。

HTML:

<body>
  <header>
    <div style="float: left; padding-right: 10px;">
      <a href="/"><img width='200' height='50' src='Icons/logo home.png' /></a>
    </div>
    <div class="navbar" style="justify-content: center;">
      <a href="discovery.html" class="navbar__link">
        <span class="material-icons">whatshot</span>
      </a>

      <a href="profile.html" class="navbar__link">
        <span class="material-icons">person_outline</span>
      </a>
    </div>

    <div class="search-box">
      <input class="search-txt" type="text" name="" placeholder="Search">
      <a class="search-btn" href="#">
    <i class="fas fa-search"></i>

      </a>
    </div>
  </header>
</body>

CSS:

.navbar__link {
    position: static;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    margin: 20px 0;
    border-radius: 10px;
    background: #ffffff;
    color: #000000;
    border-bottom: 1px solid #ffffff;
    display: flex;
    text-align: center;
    display: inline-block;
    padding: 20px;
}
}

// you don't need to add class to a tag, it can be selected by following way
.navbar > a {
  text-decoration: none;
  padding: 15px;
}

.header {
  display: flex;
  // make the header take all space of body
  width: 100%;
}

.navbar {
  display: flex;

  // make navbar take all space that remains after the logo
  flex: 1;
  justify-content: center;

  // make the navbar move left side else it will not be in complete middlle
  transform: translate(-100px);
}

.search-box {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-btn {
  color: #ffffff;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-box:hover > .search-txt {
  width: 240px;
  padding:0 6px;
}

.search-box:hover > .search-btn {
  background: #000000;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: #ffffff;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

如果你能解决这个问题，请在下面的答案框中回答 :D!

如果你能解决这个问题，请把答案写在答案框中，谢谢！

如果问题已经解决我会更新！

[更新 #1] 到目前为止什么都没有发生 [更新 #2] 已修复

Answer 1

只需像这样更改您的 .search-box css 并将其测试到您的 codepen.

.search-box {
  position: absolute;
  top: 1%;
  left: 12%;
  background: #000000;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

我该如何解决我自己陷入的混乱局面，导航栏

How do I fix this mess I've gotten myself into, nav bar

html

javascript

css

nav

navbar