Maison  >  Questions et réponses  >  le corps du texte

Comment remplir les lignes pointillées

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>

P粉757640504P粉757640504423 Il y a quelques jours480

répondre à tous(1)je répondrai

  • P粉741678385

    P粉7416783852023-09-16 10:11:34

    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>

    répondre
    0
  • Annulerrépondre