基于百分比的导航

Question

我有一个简单的布局，但它需要改变才能工作，因此它具有液体布局功能。

实施例：

有一个左右箭头。这仅适用于现在的安置。在中心我有时间段。这是我的html标记。

  <div class="timeNav">
      <div class="prev"><a title="Previous">Previous</a></div>
      <div class="slots">
        <ul>
          <li><a>7:00pm</a></li>
          <li><a>7:30pm</a></li>
          <li><a>8:00pm</a></li>
          <li><a>8:30pm</a></li>
        </ul>
      </div>
      <div class="next"><a title="Next">Next</a></div>
  </div>

我需要做的是根据百分比将时间间隔均匀分布。 我的整体设计宽度是1010像素。 我的prev按钮设置为向左浮动，我的下一个按钮向右浮动。然后对于我的插槽div，我将它设置为左浮动前一个按钮的固定左边距159px。在7:00 pm文本之前，插槽的起始位置由白色虚线表示。然后我的所有li元素都悬浮在slot div中。这些需要根据百分比进行扩展。我想设置一个特定的宽度，即80 px，在示例中用蓝色表示。然后黄色表示左右边距以允许间距。这就是我失去了如何计算li元素之间所需间距百分比的地方，因此当你扩展浏览器时它会正确地分隔出来。

我将2条虚线白线之间的值作为我的整体宽度。 657px所以我尝试根据该值或设计的总价值1010px来计算我的保证金百分比。然后我将它除以插槽div中的li元素数。

我之前没有真正处理基于百分比的布局，所以任何帮助都会很棒。 现在这只是放置，所以我不想使用JS进行放置。

Answer 1

http://jsfiddle.net/pDPFW/应该让你入门。

请注意，如果您要添加基于px / em的css，例如margin，border，padding，则应在基于％的元素中嵌套div并定义px基于/ em的财产。这基本上是流体布局的全部技巧。始终确保基于％的元素完全没有基于px的属性。

例如，您不应该有一个包含width: 16%和margin: 10px的列表项，而是将一个元素嵌套在列表中并为其提供10px边距

<li><div></div></li>