将版式组件向右对齐 [英] Align typography component to the right
本文介绍了将版式组件向右对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在同一行上对齐两个版式组件,以使一个版式组件向左对齐,另一个与右侧对齐.我该如何实现?
I would like to align two typography components on the same line so that one is aligned to the left and the other to the right. How do I achieve this?
这是我的代码,但是组件在左侧彼此相邻排列.
This is the code I have but the components are aligned next to each other to the left.
const useStyles = makeStyles({
leftText: {
textAlign: "left"
},
rightText: {
textAlign: "right"
}
});
function ChooseNewSupport(props) {
const classes = useStyles();
return (
<DialogContent>
<Typography inline variant="body1" className={classes.leftText}>
Choose New Support:
</Typography>
<Typography inline variant="body1" className={classes.rightText}>
</DialogContent>
);
}
推荐答案
如果您使用的是Mui,为什么不使用他们的道具-它会让您更轻松地使用自己的样式.您还必须将p个元素放在div中-如果使用Grid,则可以使用弹性框"space-between"将每个元素推到任一侧.
If you're using Mui, why not use their props - it'll keep it easier then your own styles. You will also have to put the p elements within a div - if you use Grid you can use flex box "space-between" to push each element to either side.
<Grid container justify="space-between">
<Typography inline variant="body1" align="left">Choose New Support:</Typography>
<Typography inline variant="body1" align="right">some text</Typography>
</Grid>
这篇关于将版式组件向右对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文