如何显示具有所需边框的导航标签？ 表，列表，别的什么？

Question

见上图。 每个导航选项卡两侧需要有2个像素分隔，并且与边缘上的标题图像完全对齐。

现在他们想介绍第5个导航标签（可能是第6个）。 是否有可能以一种方式对其进行编码，您可以在其中粘贴第5或第6个选项卡，并且所有内容都可以通过列表或表格或其他解决方案适当调整大小？ 仍保持2像素分离并准确排列边缘？ 我不确定它是否可能，或者你只需​​要根据所涉及的数学每次为每个标签定义宽度，使其全部正确地与边缘齐平。

Answer 1

我认为最好的方法是使用CSS模拟表行为。 因此，您可以使用列表，并仍然获得表行为。

ul {
    display:table;
}
li {
    display:table-cell;
}

这是一个用CSS和适当的标记显示它的演示 。 这是一个实际表格的演示 。 我不确定IE <8支持这个CSS，所以可能需要注意一些事情。

更新 ：已确认：IE6或7本机不支持此功能。 如果要支持这些浏览器，可能会遇到表格或硬编码宽度。 可能有一个javascript修复程序来支持这些display值，但我不知道它。

编辑 ：我意识到我的演示很草率，所以我做了另一个实际上解决你关于边距的观点，它使用:first-child选择器从第一个链接中移除边距，给出均匀分布的外观。 http://jsfiddle.net/wesley_murch/pe6wd/3/

Answer 2

这可能并不容易。 大多数css水平菜单类型显示实现中的一个要求是为每个元素设置固定宽度。 如果你尝试做百分比，事情就会开始分崩离析。 但是，任何事情都是可能的。

Answer 3

您是否尝试过LESS或SASS，以便在CSS中进行简单的数学运算？