CSS水平菜单 - 等间距？

Question

我有一个标准的CSS菜单,用UL和LI标签制作.我需要它们来横向覆盖整个页面(不是我的实际案例,但我会采取这种方式来简化这种情况).但是,项目是动态创建的,因此我无法将任何内容硬编码到LI项目或边距.

我已经看到使用JavaScript设置这些值的解决方案,但我真的很想避免它们.

最后,我看到了一个非常好的解决方案

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

这将在大多数浏览器中创建所需的行为......除了IE.

有任何想法吗？

编辑:感谢您的回复.但是,由于生成项目的代码不是我的,我在创建它们时无法在不使用JavaScript的情况下设置内联样式.

Answer 1

您无法设置内联元素的高度或宽度.http://www.w3.org/TR/CSS2/visudet.html#inline-width

尝试 display:inline-block;

这是修复ie:

display:inline-block;
zoom:1;
*display:inline;

Answer 2

如果您想让元素得到整个可用空间,没有必要界定一个先验的菜单元素的宽度(当然,这将有助于在同样大小的锂元素).您可以通过处理该display属性来解决此问题.

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

请注意,这width:1% 是避免单元格崩溃所必需的.