Css 在带有物料界面的卡片中并排放置项目
我目前正在显示用户配置文件的详细信息。我正在尝试使用下面列出的信息设置一张卡。我希望这些物品并排摆放,而不是像下图中那样分割 我试着给每个项目一个网格项目,但它只是把它们都列在下面。我正试图让skills和home phone并排坐在同一排 也可以和手机并排工作Css 在带有物料界面的卡片中并排放置项目,css,flexbox,material-ui,Css,Flexbox,Material Ui,我目前正在显示用户配置文件的详细信息。我正在尝试使用下面列出的信息设置一张卡。我希望这些物品并排摆放,而不是像下图中那样分割 我试着给每个项目一个网格项目,但它只是把它们都列在下面。我正试图让skills和home phone并排坐在同一排 也可以和手机并排工作 您可以为此目的使用网格 您的网格布局有一些问题,并且间距太大。间距应小于12,过大的间距会将内容推到下一行,这就是此处发生的情况 我创建了一个示例来向您展示如何设置网格。它缺少大多数样式,但布局就像您想要的一样
您可以为此目的使用网格 您的网格布局有一些问题,并且间距太大。间距应小于12,过大的间距会将内容推到下一行,这就是此处发生的情况 我创建了一个示例来向您展示如何设置网格。它缺少大多数样式,但布局就像您想要的一样
<Grid container spacing={32} justify="center">
<Grid item>
<PersonImage
personId={metadata.id}
height={175}
width={175}
/>
</Grid>
<Grid item style={{ flexGrow: 1 }}>
<Grid
container
spacing={0}
direction="column"
justify="center"
alignItems="stretch">
<Grid item xs={6}>
<Card>
<InfoLabel
label="Skills"
text={profile.skills}
/>
<InfoLabel
label="Can Also Work"
text={profile.work}
/>
<Grid
container
spacing={16}
justify="center">
<Grid item>
<InfoLabel
label="Home Phone"
text={
contactInfo.homePhone
}
/>
<InfoLabel
label="Cell Phone"
text={
contactInfo.mobilePhone
}
/>
<InfoLabel
label="Email"
text={contactInfo.email}
/>
</Grid>
</Grid>
</Card>