Html 如何创建一个水平菜单，使每个项目之间的宽度和间距相等？

以下是到目前为止我得到的信息：

但它有两个问题：

我已将每个

li

的宽度硬编码为

33%

，我不希望这样做，以便可以轻松添加更多项目

我想在每个项目之间设置一些间距（背景色中有一个间隙），但是一旦我添加了一个边距，一个项目就会沿着一行向下移动。我该怎么做

#主导航{
列表样式：无；
保证金：0；
填充：0；
宽度：100%；
溢出：自动；
}
#主导航李{
浮动：左；
宽度：33%；
高度：25px；
文本对齐：居中；
}
#主导航李a{
宽度：100%；
显示：块；
身高：100%；
线高：25px；
文字装饰：无；
背景色：#E0F0；
字体大小：粗体；
颜色：#021020；
}
#主导航李a：悬停{
背景色：#498cd5；
颜色：#ddeeee；
}

试试这把小提琴：

这种方法允许您添加任意数量的项。如果由于数量太多或浏览器窗口太小，它们不再适合该行，它们将显示在其他行中

如果在

a

样式中添加

宽度：50px

，则所有这些项的宽度都相同。现在，宽度取决于实际文本

请参见问题（和答案）

因此，我再次更新了小提琴：。

请参见：

display:table

用于均匀分配动态数目的

li

s。不幸的是，在IE7中使用了so

*float:left

（仅适用于IE7及更低版本），这样至少它们都在一行上——尽管看起来仍然很可怕

padding left:5px

应用于每个

li

，然后

li:first child{padding left:0}

仅为第一个

li

删除它

#主导航{
列表样式：无；
保证金：0；
填充：0；
宽度：100%；
显示：表格；
表布局：固定；
溢出：隐藏
}
#主导航李{
显示：表格单元格；
*浮动：左；/*改善IE7*/
高度：25px；
文本对齐：居中；
左侧填充：5px
}
#主导航李：第一个孩子{
左侧填充：0
}
#主导航李a{
宽度：100%；
显示：块；
身高：100%；
线高：25px；
文字装饰：无；
背景色：#E0F0；
字体大小：粗体；
颜色：#021020；
}
#主导航李a：悬停{
背景色：#498cd5；
颜色：#ddeeee；
}

您需要支持哪些浏览器/版本？IE7？@thirtydot：尽可能多，尽管我不太关心老版本的浏览器。好吧……这似乎会产生一个任意的1个空格，在这种情况下对我来说是可以的，但是……我想用像素来定义空格。编辑：事实上，我认为这只会起作用，因为还有剩余的1%未使用。这些项目应该填充容器的整个宽度，并且是相同的宽度，而不仅仅是一些预设的像素宽度。“css水平项之间的空白”是不相关的，因为我已经用浮动解决了这个问题，你刚刚告诉我要删除它，因此你添加了一个问题，但没有解决任何问题。很好！我更喜欢做

#主导航li+li{左填充：3px；}

而不是

：第一个孩子

的事情。我认为它得到了更好的支持，并且需要更少的代码。我从未见过或听说过其他人使用这种方法，尽管……

+

和

：第一个孩子

具有几乎相同的浏览器支持。两者都不适用于IE6，但都适用于IE7。虽然

+

解决方案缩短了一行：），但注意到此方法使第一个元素比其余元素大几个像素。table-layout:fixed。。。这是我错过的部分