使用 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% 做同样的事情。

我尝试将 float: right 应用于容器 div，但仍然将其粘在选项卡面板之外。

我可以处理调整大小事件，并重新计算其中正确属性的百分比值，但这让我觉得绕着街区去隔壁。在 css 中执行此操作的正确方法是什么？

Answer 1

如果要使用浮动，则对容器应用overflow:hidden：

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

如果要使用定位，则对容器应用position:relative：

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