如何填满点线

Question

请帮我解决这个问题 如何在reactjs中的食物名称和价格之间的空白处填写一行点？ （图片示例） 我正在为我的项目使用 Material UI 库，在此处输入图像描述

我正在为我的项目使用 Material UI 库

<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>

Answer 1

您可以在食品名称和价格之间添加一个带有虚线边框的 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;
}

<div class="container">
  <p class="food_name">Hotdog</p>
  <div class="dashed_line"></div>
  <p class="food_price">.99</p>
</div>