html - float : left on element inside a horizontally scrolling container breaks layout

Question

我的带有水平滚动元素的容器是这样的:

<header id="id-grid-top-menu">

  <div class="cd-dropdown-wrapper">
    <a class="cd-dropdown-trigger">CPB1</a> 
    <nav class="cd-dropdown" style="top: 55px; left: 30px;">
        ...nav code here...
    </nav>
  </div>

  <div class="cd-dropdown-wrapper">
    <a class="cd-dropdown-trigger">CPB1</a> 
    <nav class="cd-dropdown" style="top: 55px; left: 30px;">
        ...nav code here...
    </nav>
  </div>

  <div class="cd-dropdown-wrapper">
    <a class="cd-dropdown-trigger">CPB1</a> 
    <nav class="cd-dropdown" style="top: 55px; left: 30px;">
        ...nav code here...
    </nav>
  </div>
  .......more divs.....
</header>

CSS:

#id-grid-top-menu {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 10% !important;
    background-color: white;
    display: block;
}

.cd-dropdown-wrapper {
    float: none;
    height: initial !important;
    position: static !important;
    margin: 15px 15px !important;
    display: inline-block;
}

现在，这看起来像这样:

(抱歉，请忽略 CPB2)

这有 .cd-dropdown-wrapper 水平排列，容器让它溢出 overflow-x: scroll。但是，我不得不在 .cd-dropdown-wrapper 元素上设置 float: none 。如果我的 div 较少，它看起来像这样:

元素都是居中的。显然，这看起来不太好，我希望元素在左侧排列。但是，如果我在元素上设置 float: left，它们将不再排列并溢出；他们只是环绕。

.cd-dropdown-wrapper {
    float: left;
}

我怎样才能让它在左边对齐，但如果它扩展屏幕宽度它仍然会溢出？

编辑:

我发现了一些有趣的东西。如果在 #id-grid-top-menu 中，我设置了一个固定宽度——比如 100em。如果我将 float: left 应用于 .cd-dropdown-wrapper，它会排在左侧，并且会溢出!但是水平滚动条没有出现...

Answer 1

只需在 header 标签内添加另一个固定宽度的容器即可。

<header id="id-grid-top-menu">
  <div id="floatcontainer">
    <div class="cd-dropdown-wrapper">
      <a class="cd-dropdown-trigger">CPB1</a>
      <nav class="cd-dropdown" style="top: 55px; left: 30px;">
        ...nav code here...
      </nav>
    </div>

    <div class="cd-dropdown-wrapper">
      <a class="cd-dropdown-trigger">CPB1</a>
      <nav class="cd-dropdown" style="top: 55px; left: 30px;">
        ...nav code here...
      </nav>
    </div>

    <div class="cd-dropdown-wrapper">
      <a class="cd-dropdown-trigger">CPB1</a>
      <nav class="cd-dropdown" style="top: 55px; left: 30px;">
        ...nav code here...
      </nav>
    </div>
  </div>
</header>

CSS:

#floatcontainer {
   width: 3000px;
}