html - 如何在动态可变的 div 中定位按钮 div？

Question

您好，我创建了一个 slider ，我想在其中为 slider 提供一个按钮，它应该看起来像这样

我使用以下代码创建了 slider 按钮。一切看起来都不错

#sliderdiv 
{
    top:30%;     
    right: -2px; 
    position:fixed;
    width:300px;
    height:270px;
    margin-right: -300px;
}
#buttondiv
{                  
    height:110px;
    width:40px;
    background:aqua;
    position:absolute;
    float:left;
    margin-left: -39px;                                     
}

<div id="sliderdiv">
    <div id="buttondiv">
    </div>
</div>

现在，当 slider 的宽度发生变化时，按钮会像这样移动

我知道这是因为我给按钮 div 的 ma​​rgin-left 值。这是我的问题是有没有办法正确定位它，即使 slider div 是自动的变了？

或者有没有办法将按钮放置到 slider div 上，没有任何间隙并且不更改按钮 div 值？

谢谢...

这是 fiddle http://jsfiddle.net/sNgxR/3/

Answer 1

检查一下:

var mywidth = $("#buttondiv").width();
$("#buttondiv").css("margin-left", -mywidth);

http://jsfiddle.net/sNgxR/4/

编辑按钮的宽度并点击运行。

如果你改变 slider 的值，它工作正常