如何将单选按钮、自动完成和输入库对齐在一行中

Question

我的代码看起来是这样的。我希望屏幕显示为"观看电影"，是的，我同意。一行/一行。我怎样才能达到同样的效果呢?

https://codesandbox.io/s/serene-diffie-5fzobp?file=/src/App.js

<Box padding={1}>
<FormControl>
<RadioGroup>
<FormControlLabel
value="targetSlump"
control={<Radio color="primary" size="small" />}
label="Watch Movie"
/>
<Autocomplete
disablePortal
id="combo-box-demo"
renderInput={(params) => <TextField {...params} label={'Yes'} />}
/>
<InputBase value={'I AGREE'} />
<FormControlLabel
value="false"
control={<Radio color="primary" size="small" />}
label="Do not show this"
/>
</RadioGroup>
</FormControl>
</Box>
);

Answer 1

你可以使用flex和flexDirection: "row"样式你的RadioGroup为了水平对齐项目。

<RadioGroup
style={{
display: "flex",
alignItems: "flex-start",
flexDirection: "row"
}}
>
<FormControlLabel
value="targetSlump"
control={<Radio color="primary" size="small" />}
label="Watch Movie"
/>
<Autocomplete
disablePortal
id="combo-box-demo"
renderInput={(params) => <TextField {...params} label={"Yes"} />}
/>
<InputBase value={"I AGREE"} />
<FormControlLabel
value="false"
control={<Radio color="primary" size="small" />}
label="Do not show this"
/>
</RadioGroup>

演示