Html 基于百分比的导航

我有一个简单的布局，但它需要改变工作，所以它需要一个液体布局的能力

例如：

有一个左右箭头。这只是暂时的安置。在中心我有时间段。这是我的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>

以前的

下午7:00
下午7:30
晚上八点
晚上8:30

下一个

我需要做的是让我的时间间隔根据百分比均匀分布。 我的设计总宽度是1010px。 我的上一个按钮设置为向左浮动，下一个按钮设置为向右浮动。然后，对于我的插槽div，我将它从左浮动的上一个按钮设置为159px的固定左边距。插槽的起始位置由7:00pm文本前的白色虚线表示。然后我所有的li元素都在slots div中浮动。这些元素需要根据百分比进行扩展。我想设置一个特定的宽度，比如说80像素，在示例中用蓝色表示。然后，黄色表示允许间距的左右边距。这就是我不知道如何计算li元素之间所需的间距百分比的地方，以便在缩放浏览器时正确地隔开

我将两条白色虚线之间的值作为插槽的总宽度。657px所以我试着根据这个值或者设计的总值计算出我的利润率，也就是1010px。然后，我将它除以slots div中li元素的数量

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

应该可以开始了

请注意，如果要添加基于px/em的css，如

边距

，

边框

，

填充

，则应在基于%的元素中嵌套一个div，并在其中定义基于px/em的属性。这基本上就是流体布局的全部技巧。始终确保基于%的元素根本没有基于px的属性

例如，您不应该让一个列表项具有

宽度：16%

和

边距：10px

，而是在列表中嵌套一个元素，并给它10px的边距

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

Updated：需要澄清的是，此页面没有固定宽度。我只是用设计宽度来计算我的百分比。整个页面和所有元素都必须是流动的，并根据窗口大小进行调整。谢谢，但是如何获得16%的值呢。在我的例子中，我如何计算我的百分比值，以及应该以什么为基础。你能再解释一下你的评论吗？我不明白你的意思。“请注意，如果要添加基于px/em的css，如边距、边框和填充，则应在基于%的元素中嵌套一个div，并在其中定义基于px/em的属性。”“在我的帖子中，我提到列表项具有像素宽度，边距需要为百分比。我仍然需要像您所解释的那样，将文本包装在li元素中的div中。另外，请解释我是如何得到百分比值的。同样，它是基于两条虚线之间的宽度，还是基于总体设计宽度。我需要使用边距，因为宽度可能会根据其中的文本而变化。因此，通过使用边距，我可以保持一个恒定的间距100%是父元素的宽度，我只是将它分为6，因为您有6个项目要放入，因此为16.66667%，但这就是父元素不是浏览器的100%。这是两条白色虚线之间的距离，除非我没有抓住你的重点。另外，我希望找到的是边距百分比，而不是宽度百分比，因为我需要每边的边距来保持恒定的间距。因为宽度可能会根据放置在li元素中的时间略有变化。当我说parent时，我指的是插槽作为li元素的父元素。