CSS水平菜单 - 等间距？ [英] CSS horizontal menu - equally spaced?

问题描述

我想这是一个常见的问题，但没有找到任何好的答案，这里的问题不完全是我的情况。此外，这是我的第一个问题，所以请不要对我太苛刻。

I guess this is a common question but haven't found any good answer about it, and questions around here are not exactly my case. Also, this is my first question so please don't be too harsh on me. lol

我有一个标准的CSS菜单，用UL和LI标签。我需要他们来覆盖整个页面，水平（不是我的真实情况，但我会采取这个简化的情况）。但是，项目是动态创建的，所以我不能硬编码任何与LI项目或边距。

I have a standard CSS menu, made with UL and LI tags. I need them to get to cover the whole page, horizontally (not my real case, but I'll take this to simplify the situation). However, the items are created dynamically and so I'm not able to hardcode any with to LI items, nor margins.

我见过的解决方案使用JavaScript来设置

I've seen solutions using JavaScript to set those values but I would really love to avoid them.

最后，我看到一个很好的解决方案，设置

Lastly, I've seen a pretty good solution which is setting

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

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

This will create the desired behavior in most browsers... except for IE.

有什么想法吗？提前感谢！

Any ideas? Thanks in advance!

编辑：感谢您的回复。但是，由于生成项目的代码不是我的，因此在以后使用JavaScript时不能设置内联样式。

Thanks for the responses. However, as the code that generates the items isn't mine, I'm not able to set inline styles when creating them without using JavaScript later.

推荐答案

您不能设置内联元素的高度或宽度。 http://www.w3.org/TR/CSS2/visudet。 html＃inline-width

You can't set the height or width of an inline element. http://www.w3.org/TR/CSS2/visudet.html#inline-width

尝试 display：inline-block;

这里是ie的修复：

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

这篇关于CSS水平菜单 - 等间距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！