固定包裝的均勻隔開的div？

Question

我一直在試圖製作一個交互式的導航欄，它貼在頁面的頂部。以下是我有：

<style> 
.sticky-nav-wrapper > div 
    { 
    color: #000000; 
    display: inline-block; 
    display: -moz-inline-box; 
    *display: inline; 
    zoom: 1; 
    width: 33%; 
    text-align: center; 
    z-index: 50; 
    background: rgba(255, 255, 255, 0.8); 
    } 

</style> 
<div class="sticky-nav-wrapper"> 
    <div>TEST</div><div>TEST2</div><div>TEST3</div> 
</div> 

這將創建一個類似如下的塊：

不過，如果我儘量做到讓sticky-nav-wrapper的position固定的，那麼它得到所有混亂到一邊：

所以，我怎麼可以把它均勻分佈的，Y等到頂部？

Answer 1

你通常有正確的想法，但你把他們放在錯誤的地方。您想要將自己的固定位置應用到父母本身，然後將內聯顯示應用於孩子。這將排隊，而不是堆疊在一起。然而，除非你需要divs給孩子，否則我會用ul作爲粘性包裝的菜單，li用於每個孩子。我已經爲這兩種情況添加了演示。此致（固定）和我（與UL LIS）

見DEMO

.sticky-nav-wrapper2 { 
    color: #000000; 
    width: 100%; 
    text-align: center; 
    z-index: 50; 
    background: #ccc; 
    position:fixed; 
    top:35px; /* Remove this*/  
} 
.sticky-nav-wrapper2 ul li{ 
    list-style-type: none; 
    width: 33.3%; 
    float: left; 
}