保持絕對元素之間的寬度

我爲我的菜單使用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

來源

2013-06-03 Flaxbeard

我不認爲你需要'位置：absolute'動畫元素。 'position：relative' should work fine。 – zakangelle

關於jsFiddle我遇到了相對問題和左側屬性，你能告訴我一個例子嗎？ – Flaxbeard

你不需要絕對位置。（或者我misunterstand的最終目的）

保證金+顯示器將做到這一點：

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

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

來源

2013-06-03 19:53:22

它似乎不適合動畫，這是我的目標。 – Flaxbeard

寬度位置：相對於你說的，它應該工作正常 –

謝謝，有沒有辦法保持每個元素之間的距離相等，因爲邊距會？ – Flaxbeard

保持絕對元素之間的寬度

回答

相關問題