如何填滿點線

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>