我有一个 CSS，我希望它内联对齐

Question

我有一个 CSS 文件，我希望所有项目都像这样对齐：

到目前为止我所做的是：

由于我使用的是 Material UI，它无法正常工作。这是我的 CSS 和 ReactJS 代码：

<FormControl component="fieldset">
                <RadioGroup column
                    aria-label="survey"
                    name="survey"
                >
                    <FormControlLabel
                        value="dont_schedule"
                        control={<Radio />}
                        label={<div>Do not schedule</div>}
                        labelPlacement="Comedy"
                    />

                    <FormControlLabel
                        value="sync_once_day"
                        control={<Radio />}
                        label={<div>Sync once in a day on
                            <FormControl className="form__section">
                                <InputLabel>Age</InputLabel>
                                <Select
                                    labelId="demo-customized-select-label"
                                    id="demo-customized-select"
                                >
                                    <MenuItem value="Monday">Monday</MenuItem>
                                    <MenuItem value="Tuesday">Tuesday</MenuItem>
                                    <MenuItem value="Webnesday">Webnesday</MenuItem>
                                </Select>
                            </FormControl>
                        </div>}
                        labelPlacement="Crime"
                    />
                </RadioGroup>
            </FormControl>

这是我的 CSS：

.form__section{
    padding: 50px;
}

Answer 1

只需使用 flexbox。

.form_section{
display: flex;
align-items:center;
}