Javascript 在其他float元素之前插入（使用AJAX）float元素，而不移动它们

所以我有一堆li元素，看起来像：

<div id="previous_button">
    <a href="javascript:void(0)" id="previous">Previous</a>
</div>
<div id="slider-stage">
    <ul id="slider-list">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>Fifth</li>
        <li>Sixth</li>
    </ul>
</div>
<div id="next_button">
    <a href="javascript:void(0)" id="next">Next</a>
</div>

当左边距更改时，整个滑块列表将移动：

window.addEvent('domready', function()
{ 
    var totIncrement = 0;
    var increment = 165;
    var maxRightIncrement = increment*(-2);
    var fx = new Fx.Tween('slider-list',
    {    
        duration: '500',
        property: 'margin-left'
    });
    // Previous Button
    document.id('previous').addEvent
    ('click', function(event)
    { 
        if(totIncrement<0)
        { 
            totIncrement = totIncrement + increment;
            fx.start(totIncrement);
        }
    }); 
    // Next Button
    document.id('next').addEvent
    ('click', function(event)
    { 
        special = special + 1;
        if(totIncrement>maxRightIncrement)
        { 
            totIncrement = totIncrement - increment;
            fx.start(totIncrement);
        }
    });
}); ​

---

当新元素作为最后一个添加时，以及当我尝试作为第一个添加时，都没有问题-滑块列表移动。原因很明显，但有没有办法避免这种情况？

当您将新元素添加到列表的开头时，将左边的边距减少新元素的宽度，实际上是假装您向右滚动了一次，从而使滑块保持在相同的位置：

$('new').addEvent('click', function(event) {
    Element('<li>New</li>', {text: 'New'})
        .inject($('slider-list'), 'top');
    $('slider-list').setStyle('margin-left', $('slider-list').getStyle('margin-left').toInt() - 165);
    totIncrement -= 165;
});

$('new').addEvent('click', function(event) {
    Element('<li>New</li>', {text: 'New'})
        .inject($('slider-list'), 'top');
    $('slider-list').setStyle('margin-left', $('slider-list').getStyle('margin-left').toInt() - 165);
    totIncrement -= 165;
});