导航后的神秘空间

Question

我使用 flexbox 制作了这个导航栏，但我希望右侧按钮位于最右侧。 这是我的代码：https://codepen.io/mayankkamboj/pen/XKbdOY

HTML：

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
<nav>
  <div class='container'>
    <div class='nav-btn hoverback'>
      <img src='https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg' />
    </div>
    <div class='nav-btn no-border'>
      <i class="fa fa-search fa-2x" aria-hidden="true"></i>
      <input type='text' placeholder='Where to ?' class='search'/>
    </div>
  </div>
  <div class='container'>
    <div class='nav-btn hoverback'>
      <div class='btn b-a-host'>Become a Host</div>
    </div>
    <div class='nav-btn hoverback'>
      Help
    </div>
    <div class='nav-btn hoverback'>
      Sign Up
    </div>
    <div class='nav-btn hoverback'>
      Log In
    </div>
  </div>
</nav>

CSS：

*{
  box-sizing:border-box;
}
body{
  padding:0;
  margin:0;
}
nav{
  border-bottom:1px solid #ddd;
  font-family:'Roboto';
  display:flex;
  justify-content:space-between;
  font-weight:300;
}
nav:after{
 content:" ";
  display:block;
  clear:both;
  height:0.01px;
}
.container{
  display:flex;
}

.nav-btn{
  height:4em;
  padding:0em 1em;
  border-right:1px solid grey;
  display:flex;
  min-width:100px;
  justify-content:center;
  align-items:center;
}
.no-border{
  border-right:0px solid white;
}
img{
  height:60%;
}
.fa{
  color:#ccc;
}
nav .search{
  height:4.5em;
  width:20em;
  font-family:'Roboto';
  font-weight:400;
  border-style:none;
  text-indent:1em;
}
nav .search:focus{
  outline-style:none;
}
nav .btn{
  font-weight:400;
  color:grey;
  border:2px solid #aaa;
  padding:0.5em 0.7em;
  letter-spacing:0.01em;
}
.b-a-host{white-space:nowrap;}
.nav-btn.hoverback:hover{
  cursor:pointer;
  background-color:#f8f8f8;
}
@media (max-width:500px){
  nav{
    flex-direction:column;
  }
}

它在移动屏幕上看起来不错，但在更高的分辨率上会出现问题。我希望按钮在它们之间有空间的极端两侧。我该怎么做？

Answer 1

您在这里不需要 clearfix，因为您正在处理 flexboxes 而不是 浮动容器 - 所以您可以删除 nav:after .

问题在于nav:after 是一个弹性项目，justify-content: space-around 也会考虑这一点 - 删除nav:after 后请参阅下面的演示：

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

nav {
  border-bottom: 1px solid #ddd;
  font-family: 'Roboto';
  display: flex;
  justify-content: space-between;
  font-weight: 300;
}
/*
nav:after {
  content: " ";
  display: block;
  clear: both;
  height: 0.01px;
}
*/
.container {
  display: flex;
}

.nav-btn {
  height: 4em;
  padding: 0em 1em;
  border-right: 1px solid grey;
  display: flex;
  min-width: 100px;
  justify-content: center;
  align-items: center;
}

.no-border {
  border-right: 0px solid white;
}

img {
  height: 60%;
}

.fa {
  color: #ccc;
}

nav .search {
  height: 4.5em;
  width: 20em;
  font-family: 'Roboto';
  font-weight: 400;
  border-style: none;
  text-indent: 1em;
}

nav .search:focus {
  outline-style: none;
}

nav .btn {
  font-weight: 400;
  color: grey;
  border: 2px solid #aaa;
  padding: 0.5em 0.7em;
  letter-spacing: 0.01em;
}

.b-a-host {
  white-space: nowrap;
}

.nav-btn.hoverback:hover {
  cursor: pointer;
  background-color: #f8f8f8;
}

@media (max-width:500px) {
  nav {
    flex-direction: column;
  }
}

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
<nav>
  <div class='container'>
    <div class='nav-btn hoverback'>
      <img src='https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg' />
    </div>
    <div class='nav-btn no-border'>
      <i class="fa fa-search fa-2x" aria-hidden="true"></i>
      <input type='text' placeholder='Where to ?' class='search' />
    </div>
  </div>
  <div class='container'>
    <div class='nav-btn hoverback'>
      <div class='btn b-a-host'>Become a Host</div>
    </div>
    <div class='nav-btn hoverback'>
      Help
    </div>
    <div class='nav-btn hoverback'>
      Sign Up
    </div>
    <div class='nav-btn hoverback'>
      Log In
    </div>
  </div>
</nav>

Answer 2

您可以将一个类添加到另一个容器并使其成为justify-content: flex-end 和更多请添加flex:1 到容器，以便两个容器可以具有相同的宽度并删除clearfix。希望对你有帮助

*{
  box-sizing:border-box;
}
body{
  padding:0;
  margin:0;
}
nav{
  border-bottom:1px solid #ddd;
  font-family:'Roboto';
  display:flex;
  justify-content:space-between;
  font-weight:300;
}

.container{
  display:flex;
  flex: 1;
}

.container.right {
  justify-content: flex-end;
}

.nav-btn{
  height:4em;
  padding:0em 1em;
  border-right:1px solid grey;
  display:flex;
  min-width:100px;
  justify-content:center;
  align-items:center;
}
.no-border{
  border-right:0px solid white;
}
img{
  height:60%;
}
.fa{
  color:#ccc;
}
nav .search{
  height:4.5em;
  width:20em;
  font-family:'Roboto';
  font-weight:400;
  border-style:none;
  text-indent:1em;
}
nav .search:focus{
  outline-style:none;
}
nav .btn{
  font-weight:400;
  color:grey;
  border:2px solid #aaa;
  padding:0.5em 0.7em;
  letter-spacing:0.01em;
}
.b-a-host{white-space:nowrap;}
.nav-btn.hoverback:hover{
  cursor:pointer;
  background-color:#f8f8f8;
}
@media (max-width:500px){
  nav{
    flex-direction:column;
  }
}

<nav>
  <div class='container'>
    <div class='nav-btn hoverback'>
      <img src='https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg' />
    </div>
    <div class='nav-btn no-border'>
      <i class="fa fa-search fa-2x" aria-hidden="true"></i>
      <input type='text' placeholder='Where to ?' class='search'/>
    </div>
  </div>
  <div class='container  right'>
    <div class='nav-btn hoverback'>
      <div class='btn b-a-host'>Become a Host</div>
    </div>
    <div class='nav-btn hoverback'>
      Help
    </div>
    <div class='nav-btn hoverback'>
      Sign Up
    </div>
    <div class='nav-btn hoverback'>
      Log In
    </div>
  </div>
</nav>