html - 如何在固定大小的 div 中创建一个链接比其他链接宽的水平菜单

Question

所以我的问题是 - 我有一个固定大小为 970 像素的 div。在其中我想创建一个水平菜单，其中第一个元素将是指向带有公司 Logo 的主页的链接，其他元素将是指向页面不同部分的标准链接。

我想要的是让带有logo的链接比其他链接更宽，让其他链接平均占据剩下的空间。由于在不久的将来容器 div 的宽度可能会改变，即使我知道链接的数量我想使用百分比来确定它们的宽度所以一个链接的宽度将是 =(div 的宽度 - Logo 链接的宽度)/5(我将拥有的链接数。

我试过这样的东西

<div id="main-container">
  <div id="logo-container">
  </div>

  <div id="standard-menu-container">
  </div>
</div>

但我无法让它发挥作用(事实上，所有这些都包含在我未在此处显示的另一个 div 中)。所以谷歌搜索这个我了解到也许使用某种表格可以解决我的问题。老实说，我从来没有这样使用过表，但我按照一个例子得到了这个结果:JSFiddle Example红色矩形是我的 Logo 链接的地方，问题是其他所有东西都堆在下面。在此特定示例中， Logo 链接被排除在 <ul> 之外。但我也玩过这种情况，只是尝试设置一个宽度(以像素为单位)和其他 - 百分比似乎不是我需要做的。

如果有任何帮助，我将不胜感激，请记住，我尝试了很多使用 div 和 display: inline-block 的样式。它破坏了我结构的其他部分，所以我更喜欢正常流程不受干扰的解决方案(例如使用表格)

Answer 1

您在 display: table-cell 的正确路线上.我在您有不需要的额外代码的地方做了一些更改，并设置了 <ul>至 display: table ，而不是容器。添加table-layout: fixed将使列表中的元素(单元格)占据相同的宽度。

然后，将 Logo 向左浮动，不要为#main-menu-navigation 指定宽度，因为那样它会填满剩余空间，并给它margin-left: 150px。以满足 Logo 的宽度。

所以这在阅读时没有多大意义。看看这里:

http://jsfiddle.net/LREbC/1/

尝试调整大小，单元格将适应宽度。

注意:使用table-cell时您不需要定义宽度，行为与实际表格单元格相同。