浮動：左元素裏面水平滾動的容器破裂佈局

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

添加到@Fabio的代碼，我把float: left上的cd-dropdown-wrapper#floatcontainer和float: none的。這使它工作。

Answer 2

只是標題標籤內固定寬度增加另一個容器。

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