如何在MUI AppBar中将按钮与最右侧对齐？

沃梦达教程前端问题

2022-01-01 8

How to align a Button to the far right in MUI AppBar?(如何在MUI AppBar中将按钮与最右侧对齐？)

本文介绍了如何在MUI AppBar中将按钮与最右侧对齐？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我无法理解如何在MUI中对齐项目。我有以下代码：

class SignUpForm extends React.Component {
    render() {
        return (
            <Button sx={{ justifyContent: "flex-end" }}
                color="inherit" }>Sign Up</Button>
        )
    }
}

，由：

class Nav extends React.Component {
    render() {
        return (
            <Box sx={{ flexGrow: 1}}>
                <AppBar position="static">
                    <Toolbar>
                        <SignUpForm />
                    </Toolbar>
                </AppBar>
            </Box>
        )
    }
}

但不幸的是，内容仍然停留在左侧。使用这个资源https://mui.com/system/properties，我可能遗漏了一个重要的css概念。有谁能告诉我一下吗？

谢谢。

推荐答案

Toolbar为弹性框，可以在左侧添加div，设置justify-content为space-between，将Button向右推：

<Toolbar sx={{ justifyContent: "space-between" }}>
  <div />
  <SignUpForm />
</Toolbar>

这篇关于如何在MUI AppBar中将按钮与最右侧对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：如何在MUI AppBar中将按钮与最右侧对齐？

上一篇：在完成异步调用后呈现部分Reaction函数组件

下一篇：在Reaction和Material-UI中使用百分比和文本的循环加载器

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX