时间戳

首页 > 解决方案 > 如何使图标按钮粘在导航栏的左侧

reactjs - 如何使图标按钮粘在导航栏的左侧

问题描述

我在这里有这个组件，它可以制作一个导航栏，但到目前为止，头像按钮就在“主页”按钮旁边。我对反应和网络编程还很陌生，所以我不确定要寻找什么来使头像按钮粘在导航栏的右上角。

现在的导航栏： 在此处输入图像描述

我要显示的导航栏： 在此处输入图像描述

export default function MenuAppBar() {
    const [auth, setAuth] = React.useState(true);
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleChange = (event) => {
        setAuth(event.target.checked);
    };

    const handleMenu = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    return (
        <Box sx={{ flexGrow: 1 }}>
            <AppBar position="static">
                <Toolbar>
                    <IconButton
                        size="large"
                        edge="start"
                        color="inherit"
                        aria-label="menu"
                        onClick={handleMenu}
                        sx={{ mr: 2 }}
                    >
                        <MenuIcon />
                        <Menu
                            id="menu-appbar"
                            anchorEl={anchorEl}
                            anchorOrigin={{
                                vertical: 'top',
                                horizontal: 'right',
                            }}
                            keepMounted
                            transformOrigin={{
                                vertical: 'top',
                                horizontal: 'right',
                            }}
                            open={Boolean(anchorEl)}
                            onClose={handleClose}
                        >
                            <MenuItem onClick={handleClose}>Profile</MenuItem>
                            <MenuItem onClick={handleClose}>My account</MenuItem>
                        </Menu>
                    </IconButton>
                    <a className="navbar-brand" href="/home" sx={{ flexGrow: 1 }}>
                    Bookeroo
                    </a>
                    {auth && (
                        <div>
                            <IconButton
                                size="large"
                                aria-label="account of current user"
                                aria-controls="menu-appbar"
                                aria-haspopup="true"
                                onClick={handleMenu}
                                color="inherit"
                            >
                                <AccountCircle />
                            </IconButton>
                            <Menu
                                id="menu-appbar"
                                anchorEl={anchorEl}
                                anchorOrigin={{
                                    vertical: 'top',
                                    horizontal: 'right',
                                }}
                                keepMounted
                                transformOrigin={{
                                    vertical: 'top',
                                    horizontal: 'right',
                                }}
                                open={Boolean(anchorEl)}
                                onClose={handleClose}
                            >
                                <MenuItem onClick={handleClose}>Profile</MenuItem>
                                <MenuItem onClick={handleClose}>My account</MenuItem>
                            </Menu>
                        </div>
                    )}
                </Toolbar>
            </AppBar>
        </Box>
    );
}

标签： reactjs

解决方案

因此，我将假设您的标记类似于（不一定准确）

<div className="wrapper">
   <div className="toggle">toggle</div>
   <div className="item">Home</div>
   <div className="icon">icon</div>
</div>

我会制作wrapper一个弹性盒子并icon向右移动。像这样

.wrapper {
  display: flex;
  width: 100%;
}

.icon {
  margin-left: auto;
}

根据margin: auto边距的方向（从左到右，从右到左，等等）强制项目到末尾

推荐阅读