时间戳

首页 > 解决方案 > 如何使标题按钮居中并将项目推到工具栏的最右侧？

javascript - 如何使标题按钮居中并将项目推到工具栏的最右侧？

问题描述

这是我的标题：在此处输入图像描述

我的目标是将 [了解更多、关于、资源、联系方式] 按钮置于导航栏中间，然后将配置文件图标和切换按钮推到页面的最右侧！

理想情况下，与此类似，但在徽标/按钮/配置文件图标+开关之间有更多空白：在此处输入图像描述这就是我缩小屏幕时工具栏的样子。

我正在努力使用带有 React 和 Material UI 的 CSS 样式来完成我在宽桌面屏幕上想要的东西。非常感谢对此的一些建议。

这是我的代码：

const useStyles = makeStyles((theme) => ({
    appBar: {
        borderBottom: `1px solid ${theme.palette.divider}`,
        "@media (max-width: 950px)": {
            paddingLeft: 0,
        }
    },
    link: {
        margin: theme.spacing(1, 1.5),
        display: 'block',
    },
    toolBar: {
        display: "flex",
        justifyContent: "space-between",
    },
    toolbarTitle: {
        flexGrow: 1,
        fontFamily: 'Track',
        textAlign: "left",
    },
    navLinks: {
        fontWeight: 700,
        size: "18px",
        marginLeft: "38px",
        padding: "0 1rem",
        alignItems: "center",   
        justifyContent: "space-between",
        textAlign: "center" 
    },

    profileAvatar: {
    
    },
}));



     const displayDesktop = () => {
        return <Toolbar>
                    <Link
                        component={NavLink}
                        to="/"
                        underline="none"
                        color="textPrimary"
                    >
                      {Logo}
                    </Link>
                    <div>
                      {getMenuButtons()}
                    </div>
                      {getUserAccount()}
                    <Switch
                        checked={isDarkMode}
                        onChange={toggleDarkMode}
                    />
                </Toolbar>;
      };

    const Logo = (
        <Typography variant="h6" component="h1" className={classes.toolbarTitle} color="inherit">
          Logo
        </Typography>
      );


    const getMenuButtons = () => {
        return headersData.map(({ label, href }) => {
            return (
                <Button
                {...{
                    key: label,
                    color: "inherit",
                    to: href,
                    component: RouterLink,
                    className: classes.navLinks
                }}
                >
                    {label}
                </Button>
          );
        });
      };

    const getUserAccount = () => {
        return <div>
                <IconButton
                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={open}
                onClose={handleClose}
                >
                <MenuItem 
                component={NavLink} to="/profile" 
                onClick={handleClose}
                >
                Profile
                </MenuItem>
                <MenuItem
                component={NavLink} to="/logout" 
                onClick={handleClose}
                >
                Logout
                </MenuItem>
                </Menu>
      </div>    
    }

    return (
        <React.Fragment>
            <CssBaseline />
            <AppBar
                position="static"
                color="default"
                elevation={0}
                className={classes.appBar}
            >
                <Toolbar className={classes.toolbar}>
                    {mobileView ? displayMobile() : displayDesktop()}
                </Toolbar>
            </AppBar>
        </React.Fragment>
    );
}

我已经为我的徽标、导航链接、配置文件图标和开关功能粘贴了我的代码。

标签： javascriptcssreactjsmaterial-ui

解决方案

将 Toolbar 中的组件包装成一个单独div的组件，除了Logo组件。然后在这个 div 中添加 flex 样式

<Toolbar style={{ width: "100%", justifyContent: "space-between" }}>
  <Link to="/" underline="none" color="textPrimary">
    {Logo}
  </Link>
  <div style={{ display: "flex", alignItems: "center" }}>
    {getMenuButtons()}
  </div>
  <div>
    {getUserAccount()}
    <Switch checked={true} />
  </div>
</Toolbar>

中间div（ 的包装getMenuButtons）可以在不使用 flex 的情况下使用，因为它具有内联元素（按钮/锚点）。

推荐阅读