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>

申请'浮动：左;'和每个'li'元素的基于百分比的宽度。您选择的宽度显然取决于您拥有的条目数。为确保元素清晰，请将'overflow：hidden'应用于父元素（'ul'）元素。

修改

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

如果有的话少数元素，视觉效果是会变得非常不同导航栏。

会有一点意义你必须人为限制的地方可以的元素数量加入。

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

Answer 2

就个人而言，我认为使用表格没有任何问题。我觉得所有看不起我们桌面用户的人都很软。

但是，你可以在CSS中使用一堆DIV s float彼此相邻，每个都有一个固定%整体年龄的宽度宽度。

Answer 3

肯

我不确定你在创建web元素和css方面的技巧，但也有很多开源解决方案不使用表格（有些表格也是如此）。

以下是一些例子： http://phoenity.com/newtedge/horizontal_nav/ 这是一个很好的例子，它将向您展示“内联”版本和“块”版本。这两者的原因是使其更具活力。 “内联”版本将使用指定的宽度，而“块”版本将填充整个父元素。

需要注意的一个重要的部分是，如果你是为某种形式的公司或者能赚钱的东西做这件事，那就是你需要确保它们与IE兼容（5.5-7）大多数好的都是，但有些人只是拒绝在其中加入兼容性。如果您需要帮助，我相信社区会帮助您，我知道我会。