I have an AppBar with a tab and an IconButton. I'm trying to position the IconButton on the right side using float: right, but it doesn't seem to work.
This is how it currently looks: https://i.sstatic.net/yyf32.png
I also created a code sandbox demo for this issue:
https://codesandbox.io/s/suspicious-morning-6pf26?file=/src/App.js:234-2709
Below is the full code snippet:
export default function App() {
// code here
return (
<div className="App">
<AppBar
style={{
position: "sticky",
top: "0"
}}
>
<Toolbar variant="dense">
<div>
<>
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item>
<Tabs
// tabs configurations
>
<Tab disableRipple label="Homepage" to="/" />
<Tab disableRipple label="About" to="/about" />
<Tab disableRipple label="Admin" to="/admin" />
</Tabs>
</Grid>
<Grid item alignItems="flex-end" style={{ float: "right" }}>
<IconButton
// icon button configurations
>
<AccountCircle />
</IconButton>
</Grid>
</Grid>
</>
</div>
</Toolbar>
</AppBar>
{renderMenu}
</div>
);
}
// more content below
Is there a better way to align the AccountCircle to the right edge of the screen?