如何填滿點線-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

如何填滿點線

P粉757640504 2023-09-15 15:37:13

310

請幫我解決這個問題如何在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>

P粉757640504

全部回覆(1)

P粉7416783852023-09-16 10:11:34 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;
}