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！

如果您可以解决此问题，请在答案框中输入答案，谢谢！

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

[UPDATE＃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;
}

导航栏如何解决我陷入的混乱

1 个答案: