使用css在div中定位按钮

Question

我有一些HTML代码,所以:

<div class="ui-tabs-panel">
    <div class="dataTables_wrapper">
        <div>
            <button>Add Whatever</button>
        </div>
    </div>
</div>

与定位有关的应用样式是:

ui-tabs-panel { 
     display: block; 
} 
dataTables_wrapper: {
    clear: both, 
    position: relative;
}  
my_button div: ?  
my_button: ?

外部div是一个jQuery选项卡面板; 中间div是一个精简的jQuery数据表表.我希望我的按钮右对齐,并在标签边框内.我尝试了一些事情.将这些样式应用于按钮本身:
1. float:right右对齐,但在选项卡边框外.
2. position: absolute也会跳到标签边框之外.
3. right: -91%当屏幕最大化时看起来很棒,但是当我调整较小时,开始切断按钮的右边缘.(按钮的宽度恒定.)
4. margin-left: 91%做同样的事情.

我尝试将a float: right应用于容器div,并且仍然将其粘贴在选项卡面板之外.

我可以处理resize事件,并重新计算其中正确属性的百分比值,但这让我感到震惊,因为它绕过了隔壁.在css中执行此操作的正确方法是什么？

Answer 1

如果要使用float,则将overflow:hidden应用于容器:

.dataTables_wrapper{
   overflow:hidden;
}
button{
   float:right;
}

如果要使用定位,则应用position:relative to container:

.dataTables_wrapper{
   position:relative;
}
button{
   position:absolute; right:0;
}