如何将MUI Card内的Checkbox自适应对齐到右上角

要把Checkbox固定在卡片右上角且自适应窗口，核心是调整卡片的布局定位逻辑，以下是修改方案：

调整卡片样式与组件结构 #

原卡片的display:flex; justify-content: center; align-items: center;会让所有子元素居中，这是导致Checkbox位置不对的原因。修改后代码如下：

JSX部分

<Card
    key={index}
    variant="outlined"
    className="course card"
>
    <CardHeader
        title={
            <Typography
                className="course title"
                sx={{
                    fontFamily: "Computer Modern Sans, sans-serif",
                    color: "black"
                }}
            >
                {course}
            </Typography>
        }
    ></CardHeader>
    <CardActions disableSpacing sx={{ position: 'absolute', top: 8, right: 8 }}>
        <Checkbox size="small" color="primary"></Checkbox>
    </CardActions>
</Card>

CSS部分

.course.card{
    margin-right: 1%;
    min-height: 100px;
    max-width: 25%;
    min-width: 20%;
    flex: 1 1 20%;
    border-radius: 15px;
    display:flex;
    flex-direction: column; /* 改为垂直排列内容 */
    position: relative; /* 让内部绝对定位元素以卡片为参照 */
    padding-top: 16px; /* 避免标题被Checkbox遮挡 */
}

关键修改说明 #

• 给卡片添加position: relative，确保内部绝对定位的Checkbox以卡片为基准
• 将卡片的flex方向改为column，让CardHeader正常垂直排列
• 给CardActions添加position: absolute; top: 8; right: 8，固定在右上角，数值可根据需求调整
• 给卡片加padding-top，避免标题被Checkbox遮挡

这样调整后，无论窗口如何缩放，Checkbox都会始终固定在卡片右上角。

内容的提问来源于stack exchange，提问作者Jackie Dong