使用 css 在 div 内定位按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9437242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Positioning a button inside a div using css
提问by BobRodes
I have some html code, so:
我有一些 html 代码，所以：
<div class="ui-tabs-panel">
<div class="dataTables_wrapper">
<div>
<button>Add Whatever</button>
</div>
</div>
</div>
The applied styles that have to do with positioning are:
与定位有关的应用样式是：
ui-tabs-panel {
display: block;
}
dataTables_wrapper: {
clear: both,
position: relative;
}
my_button div: ?
my_button: ?
The outside div is a jQuery tabs panel; the middle div is a stripped-down jQuery datatables table. I want my button to be right-aligned, and inside the tab border. I've tried a few things. Applying these styles to the button itself:
1. float:rightright-aligns, but outside the tab border.
2. position: absolutegoes outside the tab border as well.
3. right: -91%looks great when the screen is maxed, but starts cutting off the right edge of the button as I resize smaller. (The button has a constant width.)
4. margin-left: 91%does the same thing.
外部 div 是一个 jQuery 选项卡面板；中间的 div 是一个精简的 jQuery 数据表。我希望我的按钮右对齐，并在选项卡边框内。我已经尝试了几件事。将这些样式应用到按钮本身：
1. float:right右对齐，但在选项卡边框之外。
2. 也 position: absolute超出选项卡边框。
3. right: -91%当屏幕最大化时看起来很棒，但是当我调整大小时开始切断按钮的右边缘。（按钮具有恒定的宽度。）
4. margin-left: 91%做同样的事情。
I tried applying a float: rightto the container div, and that still sticks it outside the tab panel.
我尝试将 afloat: right应用于容器 div，但仍将其粘贴在选项卡面板之外。
I could handle the resize event, and recalculate the percentage value of the right attribute in it, but that strikes me as going around the block to get next door. What's the right way to do this in css?
我可以处理调整大小事件，并重新计算其中正确属性的百分比值，但这让我觉得绕着街区走到隔壁。在 css 中执行此操作的正确方法是什么？
回答by Makc
If you want to use float, then apply overflow:hidden to container:
如果要使用浮动，则将溢出：隐藏到容器：
.dataTables_wrapper{
overflow:hidden;
}
button{
float:right;
}
If you want to use positioning, then apply position:relative to container:
如果要使用定位，则将 position:relative 应用到容器：
.dataTables_wrapper{
position:relative;
}
button{
position:absolute; right:0;
}
