时间戳

首页 > 解决方案 > 关闭按钮位置错误

css - 关闭按钮位置错误

问题描述

我有一个对话框，其中有一个 X 作为关闭按钮。我的代码中有一些片段如下所示。出于某种原因，它正在向下推标题文本，并在其上方留出空间。但我希望它是水平的，没有浪费的空间。

我哪里错了？

留白太多

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'left',
    color: theme.palette.text.secondary,
    height: '100%',
  },

  dialog: {
    position: 'absolute',
    // left: 10,
    top: 50,
  },
  closeButton: {
    position: 'relative',
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.grey[500],
  },
  customizedButton: {
    position: 'relative',
    left: '60',
    top: '60',
    color: 'silver',
  },
}));

                <Dialog
                  id="myDialog"
                  classes={{ paper: classes.dialog }}
                  //Modal dialog for advice on position
                  onClose={handleCloseTagInstructions}
                  open={openTagInstructions}
                  // onClose={handleCloseImportPGN}
                  aria-labelledby="form-dialog-title"
                  fullWidth={true}
                  // maxWidth={'md'}
                >
                  <DialogActions>
                     <IconButton
                      className={classes.customizedButton}
                      onClick={handleCloseTagInstructions}
                    >
                      <CloseIcon />
                    </IconButton>
                  </DialogActions>
                  <TagContent tagText={currentTag} tagColour={tagColour} />
                </Dialog>

标签： cssreactjs

解决方案

我切换到绝对，一切都很好。

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'left',
    color: theme.palette.text.secondary,
    height: '100%',
  },
  dialog: {
    position: 'absolute',
    // left: 10,
    top: 50,
  },
  closeButton: {
    position: 'absolute',
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.grey[500],
  },
  customizedButton: {
    position: 'absolute',
    left: '60',
    top: '20px',
    color: 'silver',
  },
}));

请注意，我使用 20px 添加了像素。

推荐阅读