Cara mengisi garis putus-putus

Question

Tolong bantu saya selesaikan masalah ini Bagaimana untuk mengisi barisan titik dalam ruang kosong antara nama makanan dan harga dalam reactjs? (contoh gambar) Saya menggunakan perpustakaan UI Bahan untuk projek saya, masukkan penerangan imej di sini

Saya menggunakan perpustakaan UI Bahan untuk projek saya

<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

Anda boleh menambah div dengan sempadan bertitik antara nama makanan dan harga. Saya perlu melihat kod anda untuk menunjukkan kepada anda cara melakukannya, tetapi sesuatu seperti ini akan berfungsi:

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