V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
amon
V2EX  ›  前端开发

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

  •  
  •   amon ·
    xumeng · 268 天前 · 925 次点击
    这是一个创建于 268 天前的主题,其中的信息可能已经有所发展或是发生改变。
    示意图大致如下:
    --------
    ---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
        1
    chenluo0429  
       268 天前 via Android   ❤️ 1
    实际上是个 css 问题。A 作为父元素,position 为 relative ,x 作为 A 的子元素,样式
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(100%, -50%);
    第二个问题同理
    fd9xr
        2
    fd9xr  
       268 天前 via iPhone
    css 就好啦 Mantine 就不可能能实现这种东西呀
    duan602728596
        3
    duan602728596  
       267 天前   ❤️ 1
    <!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>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5013 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 03:55 · PVG 11:55 · LAX 19:55 · JFK 22:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.