使元素向右浮动，但是如果没有足够的宽度则溢出并滚动

Question

我正在使用可在任何屏幕尺寸上使用的导航栏。对于大屏幕，使用两个容器float: left;和float: right;很容易。但是问题是，当屏幕变得太小或内容太多时，容器会分两行显示，看起来很糟。

这就是我要实现的目标（最后一个数字）。绿色矩形表示屏幕区域（显示宽度）以及不同宽度下元素的期望行为。

  

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

* {
  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 ，为什么不将nav-left也设置为flexbox而不是 floating ？ {1}}个元素。

请参见下面的演示

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;
}