html - 有没有办法在不使用表格的情况下创建全宽水平导航？

Question

我有一个带有可变宽度“按钮”的水平导航。我希望导航跨越包含 div 的整个宽度。如果我将导航放在表格中，我就能够完成此操作。你可以看看this example .表格单元格将根据单元格的数量和其中文本的宽度调整大小。

这可以不使用表格来完成吗？

编辑:为了澄清，我需要让按钮宽度灵活。客户端可以随时通过 cms 更新按钮的数量和这些按钮的文本。我需要一个不需要更新 css 的解决方案。

Answer 1

使用列表元素

<ul>
  <li><a href="...">entry 1</a></li>
  <li><a href="...">entry 2</a></li>

   ... etc

</ul>

应用'float:left;'以及每个“li”元素的基于百分比的宽度。您选择的宽度显然取决于您拥有的条目数。为确保元素正确清除，请将“溢出:隐藏”应用于父级 (“ul”) 元素。

编辑:

也许水平空间的平均分配实际上并不是在所有情况下都可取？

• 如果你有元素很少，视觉效果是将与完整的非常不同导航栏。
• 会有一个点你必须人为限制的地方可以是的元素的数量添加。

上述方法的扩展可能是右对齐最后一个“li”元素 - 这将为您提供固定的导航栏。