jquery - 保持绝对元素之间的宽度

Question

我正在为我的菜单使用 jQuery 动画，因此需要使用 position: absolute。我想在每个文本字符串之间保持相同的距离，但每个字符串的宽度不同。使用 jQuery 宽度函数给我的结果很差，有没有更好的方法来做到这一点？

$(document).ready(function () {
    $(".menuitem").css('margin-left', -80);
    var url = window.location;
    $('.menulink').filter(function () {
        return this.href == url;
    }).removeClass('menulink');
    //$(".menuitem").animate({marginLeft: "20px"}, 2000);
    var number = (".menuitem").length;
    var px = number * 40 + 60;
    $($(".menuitem").get().reverse()).each(function (i, e) {
        $(this).delay(i * 200).animate({
            left: px
        }, 1000, 'linear');
        px = px - 80;
    });
});

jsFiddle 示例

Answer 1

你不需要绝对位置。（或者我误解了最终目的）

边距+显示会做到这一点：

.menuitem {
    display:inline-block;
    margin:0 1em 0 0
}

http://jsfiddle.net/GCyrillus/3bM9L/1