Comment remplir les lignes pointillées

Question

S'il vous plaît, aidez-moi à résoudre ce problème Comment remplir une rangée de points dans l'espace vide entre le nom de l'aliment et le prix dans Reactjs ? (exemple en photo) J'utilise la bibliothèque Material UI pour mon projet, entrez la description de l'image ici

J'utilise la bibliothèque Material UI pour mon projet

<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

Vous pouvez ajouter un div avec une bordure en pointillés entre le nom de l'aliment et son prix. J'aurais besoin de voir votre code pour vous montrer exactement comment le faire, mais quelque chose comme ceci fonctionnerait :

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