前端大佬进， React + mantine-ui 中如何实现这种布局（一个控件水平居中，另一个控件在它右边）

示意图大致如下：
--------
---A-x-
--------

现在有个 Group ，Group 里面有个按钮 A ，A 水平居中，A 的右边有一个小按钮 x （ x 靠着 A 的右边，比如间距 5px ）。

试了一圈，一直没有好的解决办法。谢谢！

如果 Group 里面有 2 个按钮 A 和 B ，A 和 B 整体水平居中，另有一个小按钮 x 在 B 的右边，实现是一样吗。
-----------
---A-B-x-
-----------

chenluo0429

59 天前

实际上是个 css 问题。A 作为父元素，position 为 relative ，x 作为 A 的子元素，样式
position: absolute;
right: 0;
top: 50%;
transform: translate(100%, -50%);
第二个问题同理

fd9xr

58 天前

css 就好啦 Mantine 就不可能能实现这种东西呀

duan602728596

58 天前

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container {
width: 300px;
padding: 16px 0;
border: 1px solid #000;
text-align: center;
}

.btn {
width: 50px;
height: 30px;
}

.btn-item {
position: relative;
display: inline-block;
margin: 0 4px;
text-align: left;
}

.small-btn {
position: absolute;
bottom: 0;
right: -75px;
}
</style>
</head>
<body>
<div class="container">
<div class="btn-item">
<button class="btn">Btn1</button>
</div>
<div class="btn-item">
<button class="btn">Btn2</button>
<button class="small-btn">Small btn</button>
</div>
</div>
</body>
</html>

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1022681

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.