英文:
Align Mui Card Action to the Top Right
问题
我试图将一个复选框与一个MUI卡片顶部右对齐，但一直在努力很长时间。这是我当前的样子
。我想要按钮与右上角对齐（即在窗口缩小时，我仍希望复选框位于右上角）。
这是我目前用于创建这些卡片以及样式的代码：
<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>
<Checkbox size="small" color="primary">
</Checkbox>
</CardActions>
</Card>
.course.card{
margin-right: 1%;
min-height: 100px;
max-width: 25%;
min-width: 20%;
flex: 1 1 20%;
border-radius: 15px;
display:flex;
justify-content: center;
align-items: center;
}
英文:
I am trying to align a checkbox within a MUI card to the top right but have been struggling for a long time do so. This is an image of what I currently have. I would like the button to be aligned to the top right corner (dynamically aka when the window shrinks I still want the checkbox to be on the top right).
This is the code I currently have to create these cards as well as the styling
<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>
<Checkbox size="small" color="primary">
</Checkbox>
</CardActions>
</Card>
.course.card{
margin-right: 1%;
min-height: 100px;
max-width: 25%;
min-width: 20%;
flex: 1 1 20%;
border-radius: 15px;
display:flex;
justify-content: center;
align-items: center;
}
答案1
得分: 1
由于Card没有CardContent，可以尝试为CardHeader添加flex: 1来将CardActions推到右侧，并将CardActions样式化以将Checkbox放在右上角。
在stackblitz上有一个精简示例。
CardActions中的padding可以进行编辑以进一步自定义Checkbox的位置。
如果稍后向组件添加CardContent，也许可以将其属性设置为flex: 1以保持布局。
英文:
Since the Card does not have CardContent, perhaps try add flex: 1 for CardHeader to push CardActions to the right, and style CardActions to place the Checkbox to the top right corner.
Minimized example on: stackblitz
The padding in CardActions can be edited to further customize the position of Checkbox.
<Card key={index} variant="outlined" className="course card">
<CardHeader
sx={{
display: "flex",
flex: "1",
}}
title={
<Typography
className="course title"
sx={{
fontFamily: "Computer Modern Sans, sans-serif",
color: "black",
display: "flex",
justifyContent: "center",
}}
>
{course}
</Typography>
}
></CardHeader>
<CardActions
disableSpacing
sx={{
alignSelf: "stretch",
display: "flex",
justifyContent: "flex-end",
alignItems: "flex-start",
// 👇 Edit padding to further adjust position
p: 0,
}}
>
<Checkbox size="small" color="primary"></Checkbox>
</CardActions>
</Card>
If CardContent is added to the component later, perhaps it could have the property flex: 1 instead to maintain the layout.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论