Question

如何在纸质容器内的版式标签旁边放置一个按钮，使其与右侧/末端对齐？

<div className={classes.root}>
    <Grid container spacing={3}>
      <Grid item xs={12} md={6}>
        <Paper className={classes.paper}>
          <Typography inline>CPU</Typography>
          <IconButton className={classes.button} aria-label="Add" size="medium" ><AddIcon /></IconButton>
        </Paper>
      </Grid>
</div>

这是我的风格：

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    padding: theme.spacing(2),
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    color: theme.palette.text.secondary,
  }
}));

我正在使用Typography的 inline 属性，但是该按钮继续显示在下一行...非常感谢，我是新手。

Answer 1

如果您不介意添加更多dom元素。

<div className={classes.root}>
    <Grid container spacing={3}>
        <Grid item xs={12} md={6}>
            <Paper className={classes.paper}>
                <Grid container alignContent="space-between" alignItems="center">
                    <Grid item>
                        <Typography inline>CPU</Typography>
                    </Grid>
                    <Grid item>
                        <IconButton className={classes.button} aria-label="Add" size="medium" ><AddIcon /></IconButton>
                    </Grid>
                </Grid>
            </Paper>
        </Grid>
</div>

否则，您可以更改CSS属性

paper: {
    padding: theme.spacing(2),
    color: theme.palette.text.secondary,
    display: flex,
    alignContent: 'space-between',
    alignItems: 'center'
}

印刷术旁边的按钮

1 个答案: