我該如何解決這個我自己陷入的混亂，導航欄

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 .search-box css 並將其測試到您的codepen中。

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

我該如何解決這個我自己陷入的混亂，導航欄

問題描述

1 個解決方案

解決方案1
0 已采納 2020-07-08 10:53:03

我該如何解決這個我自己陷入的混亂，導航欄

問題描述

1 個解決方案

解決方案1 0 已采納 2020-07-08 10:53:03

解決方案1
0 已采納 2020-07-08 10:53:03