导航栏的 CSS Float答案

【问题标题】：CSS Float for a navbar导航栏的 CSS Float
【发布时间】：2019-11-16 05:08:10
【问题描述】：

玩浮动，我遇到了一个我无法理解的问题。考虑以下用于制作简单导航的代码 (Navbar with no floating children)。

    <div style="background-color: rgb(65, 224, 185); padding: 2% 15%;">
      <span class="navbar-item">Best City Guide</span>
      <span class="navbar-item">Best City Guide</span>
      <span class="navbar-item">ICE CREAM</span>
      <span class="navbar-item">DONUTS</span>
      <span class="navbar-item">TEA</span>
      <span class="navbar-item">COFFEE</span>
    </div>

现在，如果我在最后三个 span 上使用 float right，它们将浮动到右侧，但是，它们不会与左侧 span 保持在同一行，如：Navbar with floating children 所示。

为什么会发生这种情况以及如何解决？

【问题讨论】：

你到底想要什么输出？
提供你的css代码。

标签： css css-float

【解决方案1】：

试试这个，

nav{
  background-color: rgb(65, 224, 185);
  padding: 20px 10px;
}
nav span{
  padding: 8px;
  margin:5px;
}
.navbar-item{
  background: #FFF;
  display: inline-block;
}
span.navbar-item:nth-last-child(-n+4) {
  float:right;
}

<nav>
  <span class="navbar-item">Best City Guide</span>
  <span class="navbar-item">Best City Guide</span>
  <span class="navbar-item">ICE CREAM</span>
  <span class="navbar-item">DONUTS</span>
  <span class="navbar-item">TEA</span>
  <span class="navbar-item">COFFEE</span>
</nav>

【讨论】：

【解决方案2】：

您好，您的问题无法理解。但我会给出我的解决方案。

我推荐你使用 css flex。与justify-content: space-between;

在此处查找 flex 代码 - https://stackblitz.com/edit/js-goay7v

如果你想坚持使用浮动，请继续，但是你需要改变你的 DOM 结构。将您想要浮动的任何内容包装在 div 中并将浮动应用到它（包装器元素）。在这种情况下，两者都将保持在同一行，并且您不会失去元素的顺序。

在此处查找浮点代码 - https://stackblitz.com/edit/js-rmcsxn

【讨论】：