我有一個組件，里面有三個不同的Typography組件。我想將“摘要”對齊到左側，將“英里”和“持續時間”對齊到右側。
我的代碼如下：
<Stack direction="row" spacing={1} divider={<Divider orientation="vertical" flexItem />} justifyContent='flex-end'>
<Box align='left'>
<Typography>Summary</Typography>
</Box>
<Box>
<Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><DirectionsCarIcon /> {Math.round(totalDistance * 0.000621371192 * 10) / 10} Miles</Typography>
</Box>
<Box>
<Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><AccessTimeIcon /> {totalDuration}</Typography>
</Box>
</Stack>
我嘗試弄亂該justifyContent屬性，但沒有用。我對 CSS 和樣式很陌生，所以我不確定這種情況下最好的方法是什么。非常感謝任何幫助或替代建議:)
uj5u.com熱心網友回復：
<Stack direction="row" spacing={1} divider={<Divider orientation="vertical" flexItem />} justifyContent='space-between'>
<Box align='left'>
<Typography>Summary</Typography>
</Box>
<Stack direction="row" justifyContent={"flex-end"} spacing={1}>
<Box>
<Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><DirectionsCarIcon /> {Math.round(totalDistance * 0.000621371192 * 10) / 10} Miles</Typography>
</Box>
<Box>
<Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><AccessTimeIcon /> {totalDuration}</Typography>
</Box>
</Stack>
</Stack>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/490227.html
標籤：javascript css 反应 材料-ui
上一篇：如何在函式引數中鍵入提示特定物件