相关疑难解决方法(0)

今天在Smashing杂志上出现了一种使用CSS在容器中均匀分配元素的方法.

我最近不得不使用Javascript来实现对可变宽度元素的相同效果,但SM上提供的方法让我想知道是否可以在没有Javascript的情况下执行此操作.

有这个问题,gargantaun说:

恕我直言,你可能不想听到这个,但设计可能有缺陷.众所周知,使用CSS在布局中均匀分布项目是一种痛苦,因此设计人员应该避免使用它.

但我无法告诉设计师改变他的设计,我不同意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 …