均匀间隔的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＆＃39; position修复，那么它就会混淆到一边：

那么，我如何保持它均匀分布，但固定在顶部？

Answer 1

你通常有正确的想法，但你把它们放在错误的地方。您希望将固定位置应用于父级本身，然后将显示内联到子级。这将排列起来，而不是堆叠在彼此之上。但是，除非你需要孩子的div，否则我会在粘性包装中使用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;
}