css - 使元素向右浮动，但如果宽度不够则溢出并滚动

Question

我正在开发适用于任何屏幕尺寸的导航栏。对于大屏幕，使用两个容器 float: left; 和 float: right; 很容易。然而，问题是当屏幕太小或内容太多时，容器会分两行，看起来很糟糕。

这是我想要实现的(最后一张图)。绿色矩形表示屏幕区域(显示宽度)和我期望的元素在不同宽度上的行为。

这是我现在的代码，在根容器上添加了 resize: horizo​​ntal; 以便于测试。

* {
  font-family: sans-serif;
}

nav {
  width: 400px;
  overflow: scroll hidden;
  background-color: #EEE;
  border: 2px solid black;
  resize: horizontal;
}

.nav-left {
  float: left;
  display: flex;
}

.nav-right {
  float: right;
  display: flex;
}

.nav-item {
  display: inline-block;
  background-color: #00C;
  color: #FFF;
  padding: 1rem;
}

.nav-item:hover {
  background-color: #08F;
}

<nav>
  <div class="nav-left">
    <div class="nav-item">Left</div>
    <div class="nav-item">Left</div>
    <div class="nav-item">Left</div>
  </div>
  <div class="nav-right">
    <div class="nav-item">Right</div>
    <div class="nav-item">Right</div>
    <div class="nav-item">Right</div>
  </div>
</nav>

Answer 1

为什么不让 nav 也成为一个 flexbox，而不是 floating，因为你已经在为 nav 使用 flexbox -left 和 nav-right 元素。

请看下面的演示:

* {
  font-family: sans-serif;
}

nav {
  width: 400px;
  overflow: scroll hidden;
  background-color: #EEE;
  border: 2px solid black;
  resize: horizontal;
  display: flex; /* added */
  justify-content: space-between; /* spread them horizontally */
}

.nav-left {
  float: left;
  display: flex;
}

.nav-right {
  float: right;
  display: flex;
}

.nav-item {
  display: inline-block;
  background-color: #00C;
  color: #FFF;
  padding: 1rem;
}

.nav-item:hover {
  background-color: #08F;
}

<nav>
  <div class="nav-left">
    <div class="nav-item">Left</div>
    <div class="nav-item">Left</div>
    <div class="nav-item">Left</div>
  </div>
  <div class="nav-right">
    <div class="nav-item">Right</div>
    <div class="nav-item">Right</div>
    <div class="nav-item">Right</div>
  </div>
</nav>