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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 47 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

3 条回复 • 2024-03-12 12:36:37 +08:00

chenluo0429

47 天前 via Android

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

fd9xr

46 天前 via iPhone

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

duan602728596

46 天前

<!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>