我正在尝试对齐 FormControlLabel
组件内的标签和单选按钮,以便无论其中的文本如何,标签都具有相同的宽度。这是它目前的样子:
这是我的代码:
<RadioGroup row>
<FormControl>
<FormControlLabel
value={first_column_day}
control={
<Radio
value={first_column_day}
/>
}
label={<Typography variant={"subtitle2"}>{first_column_day}</Typography>}
labelPlacement="start"
/>
</FormControl>
<FormControl>
<FormControlLabel
value={second_column_day}
control={
<Radio
value={second_column_day}
/>
}
label={<Typography variant={"subtitle2"}>{second_column_day}</Typography>}
labelPlacement="start"
/>
</FormControl>
</RadioGroup>
我尝试为 FormControl
添加 justifyContent
:
<FormControl style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
我还尝试将 Typography
包装在 div
中:
<div><Typography variant={"subtitle2"}>{first_column_day}</Typography></div>
但是这些都不起作用。到目前为止,唯一可行的是向 Typography
添加固定宽度,如下所示:
<Typography style={{ width: 75 }} variant={"subtitle2"}>{first_column_day}</Typography>
但我真的不喜欢这样做,因为它没有响应。将宽度设置为 100% 也不起作用。
最佳答案
如果您需要像下面这样对齐而不失去响应能力,您可以将 min-width
添加到 FormControlLabel
组件 -
此处使用沙箱 - https://codesandbox.io/s/material-demo-3u8i2?file=/demo.js
关于css - Material UI 如何证明 FormControlLabel 中的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61223247/