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，并且仍然将其粘贴到标签面板之外。

我可以处理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;
}

使用css在div中定位按钮

1 个答案: