提问人：Govind Ramesh 提问时间：11/18/2023 最后编辑：Heretic MonkeyGovind Ramesh 更新时间：11/18/2023 访问量：30
如何仅使用 CSS 将 div 内的按钮移出该 div
How can I move a button inside a div out of that div using just CSS
问：
我在 div 内有两个按钮，在 div 外有另一个按钮。我正在尝试将 div 内的一个按钮带到位于 div 外的按钮下方的外部。请参阅下面的示例代码。
<div class="container">
<button id="Reject">Reject</button>
<button id="Accept">Accept</button>
</div>
<button id="Manage">Settings</button>在上面的例子中，我需要将拒绝按钮从div中取出，并使用CSS将其添加到设置按钮下方。我无法控制 HTML。
我尝试了定位和：after技巧，但没有任何效果
答：
0赞
Amaury Hanser
11/18/2023
#1
如果有共同的父母，则可以使用display: contents;
显示：内容
这些元素本身不会生成特定的框。它们被伪框和子框所取代。请注意，CSS Display Level 3 规范定义了 contents 值应如何影响“异常元素”，即不是纯粹由 CSS 框概念呈现的元素，例如替换元素。
display： 内容 - MDN
检查 caniuse.com 上的支持
.container {
display: contents;
}
.parent {
display: flex;
flex-direction: column;
align-items: start;
}
#Reject {
order: 3;
}<div class="parent">
<div class="container">
<button id="Reject">Reject (first in dom, last on screen)</button>
<button id="Accept">Accept</button>
</div>
<button id="Manage">Settings</button>
</div>评论
0赞
Heretic Monkey
11/18/2023
这会将所有三个按钮带到同一个公共父级，而 OP 只要求将一个按钮带到容器外部。
0赞
Amaury Hanser
11/19/2023
公平地说，我专注于“将其添加到设置按钮下方”这句话，并给出了一个解决方案来回答它。
0赞
Govind Ramesh
11/20/2023
嗨，Amaury Hanser，这很有帮助。谢谢你的回答
评论