无法让框在 AppBar 内完全右对齐答案

【问题标题】：Cannot get a box to fully right align within an AppBar无法让框在 AppBar 内完全右对齐
【发布时间】：2022-11-02 23:05:49
【问题描述】：

我有这个 MUI 应用程序栏，其中包含一个图像、一些文本和一个包含图标的框以及登录用户的一些信息。我很难将带有用户信息的框强制对齐。我无法让它转到页面的右边缘。我只能让它坚持到最后一个盒子的末端。

<AppBar position="fixed" className={classes.appBar}>
    <Toolbar>
        <div id="app-bar-box" style={{ width: "100%", display: "flex" }}>
            <Box id="logo-env-txt-box" justifyContent="left" style={{ display: "flex", alignItems: "center" }}>
                <a href="/home">
                    <SVGLOGO className="logo_stack" />
                    <SVGLOGOHORI className="logo" />
                </a>
                <Typography className={classes.envFlag} hidden={hidden}>
                    You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
                    <a href="">here</a> to go to production.
                </Typography>
            </Box>
            <Box id="user-info-box" justifyContent="right" style={{ display: "flex", alignItems: "center", width: "400px", height: "64px" }}>
                <i class="dds__icon dds__icon--user" style={{ fontSize: "24px", color: "#636363", marginRight: "10px" }}></i>
                <Box style={{ marginLeft: "10px" }}>
                    <Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
                        John Doe Admin
                    </Typography>
                    <Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
                        Product Lead
                    </Typography>
                </Box>
            </Box>
        </div>
    </Toolbar>
</AppBar>

【问题讨论】：

标签： css material-ui

【解决方案1】：

（转发）无需为您的 div user-info-box 使用宽度。

您可以将justifyContent : "space-between" 用作您的第一个元素，并且您可以删除您的子元素的justifyContent : "left" 和justifyContent : "right"。

<AppBar position="fixed" className={classes.appBar}>
    <Toolbar>
        <div id="app-bar-box" style={{ width: "100%", display: "flex", justifyContent: "space-between" }}>
            <Box id="logo-env-txt-box" style={{ display: "flex", alignItems: "center" }}>
                <a href="/home">
                    <SVGLOGO className="logo_stack" />
                    <SVGLOGOHORI className="logo" />
                </a>
                <Typography className={classes.envFlag} hidden={hidden}>
                    You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
                    <a href="">here</a> to go to production.
                </Typography>
            </Box>
            <Box id="user-info-box" style={{ display: "flex", alignItems: "center", height: "auto" }}>
                <i class="dds__icon dds__icon--user" style={{ fontSize: "24px", color: "#636363", marginRight: "10px" }}></i>
                <Box style={{ marginLeft: "10px" }}>
                    <Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
                        John Doe Admin
                    </Typography>
                    <Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
                        Product Lead
                    </Typography>
                </Box>
            </Box>
        </div>
    </Toolbar>
</AppBar>

【讨论】：