[英]MUI: how to align text side by side?
I want the numbers and text to line up side-by-side like this picture.我希望数字和文字像这张图片一样并排排列。
But there is a margin to the right of that text
(MASTER I 406)
, so the numbers don't come in the right place.但是该文本的右侧有一个边距
(MASTER I 406)
,因此数字没有出现在正确的位置。 Currently I'm using transform: 'translateY()'
to force the number into position.目前我正在使用
transform: 'translateY()'
将数字强制转换为 position。 In this way, the position of the number is broken when the size of the screen is changed.这样在改变屏幕大小时,数字的position就坏了。 Please tell me how to solve this.
请告诉我如何解决这个问题。
https://codesandbox.io/s/still-morning-0q92mh?file=/src/App.js https://codesandbox.io/s/still-morning-0q92mh?file=/src/App.js
You can use the Grid system like the solution below:您可以像下面的解决方案一样使用网格系统:
import { Card, CardContent, Typography, Grid } from "@mui/material";
import RiceBowlIcon from "@mui/icons-material/RiceBowl";
export default function App() {
return (
<Card
sx={{
borderRadius: 7,
marginTop: 3
}}
>
<CardContent>
<Grid container spacing={2}>
<Grid item xs={6}>
<RiceBowlIcon />
<Typography
component="span"
sx={{
fontSize: 20,
marginLeft: 1,
fontWeight: 600
}}
>
JohnDoe
</Typography>
<Typography
sx={{
fontSize: 10,
ml: 4,
color: "#909090",
// width: "20%" // You don't need to specify the width as it wil break the text in two lines
}}
>
MASTER I 100
</Typography>
</Grid>
<Grid item xs={6}>
<Typography
sx={{
float: "right",
fontSize: 20,
fontWeight: 540
}}
>
(+10.00%)
</Typography>
<Typography
component="span"
sx={{
float: "right",
fontSize: 20,
fontWeight: 540
}}
>
10,000
</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
);
}
To explain a little more, you can create a Grid with two Grid Items.为了解释更多,您可以创建一个包含两个 Grid Item 的 Grid。 In the left Grid item you have the icon with the texts so it will work as a container and on the right one, the numbers '10.000'.
在左侧网格项目中,您有带有文本的图标,因此它将作为容器工作,在右侧,数字“10.000”。 With that way the content of the left Grid shouldn't affect the content of the right one.
这样,左侧网格的内容就不会影响右侧网格的内容。
Here is the updated sandbox based on your code.这是根据您的代码更新的沙箱。
MUI Grid layout is a very powerful system you can use for your customized UI. MUI网格布局是一个非常强大的系统,您可以将其用于自定义 UI。 You need one Grid container with 2 Grid items inside.
您需要一个 Grid 容器,其中包含 2 个 Grid 项目。 Your code should be like this:
你的代码应该是这样的:
import { Card, CardContent, Typography, Grid } from "@mui/material";
import RiceBowlIcon from "@mui/icons-material/RiceBowl";
export default function App() {
return (
<Card
sx={{
borderRadius: 7,
marginTop: 3
}}
>
<CardContent>
<Grid container sx={{ alignItems: "center" }}>
<Grid item xs={10}>
<RiceBowlIcon />
<Typography
component="span"
sx={{
fontSize: 20,
fontWeight: 600
}}
>
JohnDoe
</Typography>
<Typography
sx={{
fontSize: 10,
color: "#909090",
ml: 4
}}
>
MASTER I 100
</Typography>
</Grid>
<Grid item xs={2} sx={{ textAlign: "center" }}>
<Typography
sx={{
fontSize: 20,
fontWeight: 540,
mr: 2
}}
>
(+10.00%)
</Typography>
<Typography
component="span"
sx={{
fontSize: 20,
fontWeight: 540
}}
>
10,000
</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.