html - 在不移动其他元素的情况下增加文本栏的宽度

Question

我正在使用 flexbox 复制 Youtube 导航栏，但是当我遇到搜索栏时，它一直在移动图标，同时我试图增加搜索栏的宽度。

我试过 position absolute 和 align self 但没有用。

* {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  background-color: #f1f1f1;
}

.navigation {
  height: 60px;
  width: 100%;
  box-shadow: 0px 10px 9px #eeeeee;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.stack,
.icon {
  width: 100px;
}


/* right corner of nav bar  */

.menu {
  position: relative;
  right: 30px;
  width: 23px;
  opacity: .6;
}

.youtube-logo {
  position: relative;
  right: 130px;
  width: 90px;
}

.search-bar {
  position: relative;
  left: 100px;
  height: 30px;
}

<nav class="navigation">

  <a href="#menu">
    <img src="images/menu.svg" alt="menu for the top left, shaped like a hamburger" class="menu">
  </a>

  <a href="#logo">
    <img src="images/youtube.logo.png" alt="youtube logo" class="youtube-logo">
  </a>

  <input type="text" name="searchbar" placeholder="Search" class="search-bar">


  <a href="#video-icon">
    <img src="images/video.svg" alt="video icon" class="video">
  </a>
</nav>

我希望搜索栏与 YouTube 搜索栏的宽度完全相同，而无需移动其他图标。

Answer 1

//你可以使用 ul li 来固定导航栏，这对不移动导航栏中的其他元素非常有帮助

像这样: 导航栏

<div class="collapse navbar-collapse">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
   </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
   </li>
   <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
   <input class="form-control mr-sm-2" type="search" placeholder="Search" aria- 
    label="Search">
   <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
  </div>
</nav>

//或使用 Bootstrap 4 非常好用和简单