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 example

Answer 1

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

保证金+显示将执行此操作：

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

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

保持绝对元素之间的宽度

1 个答案: