javascript - 使用 CSS 均匀分布元素

Question

一种使用 CSS 在容器中均匀分布元素的方法 appeared on Smashing Magazine今天。

我最近不得不使用 Javascript 为可变宽度的元素实现相同的效果，但是 SM 上提供的方法让我想知道是否可以在没有 Javascript 的情况下实现这一点。

有 this question , 其中gargantaun说:

IMHO, and you probably don't want to hear this, but the design is probably flawed. It's common knowledge that distributing items evenly across a layout with CSS is a pain, so designers should avoid it.

但我不能告诉设计师改变他的设计，我不同意CSS的缺点应该限制设计师。

无论如何，这是我在 HTML 中的内容(经过翻译和简化):

<div id="menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/news">News</a></li>
        <li><a href="/theme">Theme</a></li>
        <li><a href="/activities">Activities</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</div>

在 CSS 中(删除并简化了不相关的属性):

#menu li { float: left; margin-right: 20px; }
#menu a  { display: block; padding: 0 1em; }

在 Javascript 中:

function justifyMenu() {
    var menuItems  = $$("#menu li");
    var menuWidth  = $("menu").getWidth();
    var totalWidth = 0;

    menuItems.each(function(e) {
        totalWidth += e.getWidth();
    });

    var margin = (menuWidth - 4 - totalWidth) / (menuItems.length - 1);
    margin = parseInt(margin);

    menuItems.each(function(e) {
        e.setStyle({ marginRight: margin + 'px' });
    });

    menuItems[menuItems.length - 1].setStyle({ marginRight: '0' });
}

这是按比例缩小的屏幕截图(查看菜单如何与标题图像对齐):

知道如何在没有 Javascript 的情况下实现这一目标吗？

Answer 1

当然，这正是 table 元素的用途。看到人们将自己与 CSS 打成一个棘手的结，既可悲又可笑，他们中的大多数人甚至不知道为什么他们要避开表格。

无论您出于何种原因想拒绝表格，它都不会比依赖 Javascript 来布局您的页面更糟糕。

是的，我知道这不是您要找的答案，但是天哪，它是如此显而易见。