Question

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

我已经尝试过定位绝对位置并自我对齐，但这没用。

* {
  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用于固定的导航栏，这对于不要移动导航栏中的其他元素非常有帮助

像这样：导航栏

<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

Answer 2

您可能希望使用justify-content：空格，然后调整输入栏的flex属性。 Flexbox项目的默认值为flex：0 1自动（又名flex-grow：0，flex-shrink：1，flex-basis：auto）。在这种情况下，默认情况下，您希望输入栏增加并占用flex容器中的剩余可用空间，因此，如果将其flex属性设置为flex：1（相当于flex：1 1 0）或设置flex -grow：1完成。

justify-content：每个元素之间的空格均等，并且将flex容器中第一个项目之前和最后一个项目之后的空白空间设置为等于每个相邻项目之间空间的一半。使用justify-content：之间的空格将强制flex容器中的第一项和最后一项分别与flex容器的开始和结尾齐平。

通过这种方式，您无需使用相对位置/绝对位置（也不必在flex容器中使用这两个位置中的任何一个），并且可以使用边距来改善每个元素之间的间距。

* {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  background-color: #f1f1f1;
}

.navigation {
  height: 60px;
  box-shadow: 0px 10px 9px #eeeeee;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}

.stack,
.icon {
  width: 100px;
}

/* right corner of nav bar  */
.menu {
  width: 23px;
  opacity: 0.6;
  margin: 0 16px 0 0;
}

.youtube-logo {
  width: 90px;
  height: 40px;
}

.search-bar {
  margin: 0 40px;
  flex: 1;
}

<nav class="navigation">
  <a href="#menu">
    <img src="https://via.placeholder.com/23" alt="menu for the top left, shaped like a hamburger" class="menu">
  </a>
  <a href="#logo">
    <img src="https://via.placeholder.com/190" alt="youtube logo" class="youtube-logo">
  </a>
  <input type="text" name="searchbar" placeholder="Search" class="search-bar">
  <a href="#video-icon">
    <img src="https://via.placeholder.com/40" alt="video icon" class="video">
  </a>
</nav>

有关证明内容值如何工作的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

有关flex属性的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/flex

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

2 个答案: