Bitte helfen Sie mir, dieses Problem zu lösen Wie fülle ich in ReactJS eine Reihe von Punkten in den Leerraum zwischen Lebensmittelname und Preis aus? (Bildbeispiel) Ich verwende die Material-UI-Bibliothek für mein Projekt. Geben Sie hier eine Bildbeschreibung ein
Ich verwende die Material UI-Bibliothek für mein Projekt
<Grid container spacing={2}>
{coffeeMenu.map((item, index) => (
<Grid item xs={6} key={index}>
<Link
underline='none'
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
px: 5,
fontWeight: 'bold',
color: '#000',
'&:hover': {
color: '#D8AE78',
cursor: 'pointer',
},
}}
>
<Typography>{item.name}</Typography>
<Typography>{item.price}đ</Typography>
</Link>
</Grid>
))}
</Grid> 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您可以在食品名称和价格之间添加一个带有虚线边框的 div。我需要查看您的代码来准确地向您展示如何实现，但类似这样的东西可以工作：
.container { width: 50%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .food_name { margin-right: 20px; } .food_price { margin-left: 20px; } .dashed_line { flex: 1; border-top: 1px dashed black; }