React Material UI：使文本字段保持在一行答案

【问题标题】：React Material UI: Make textfields stay in one rowReact Material UI：使文本字段保持在一行
【发布时间】：2019-02-12 05:31:31
【问题描述】：

即使我调整页面大小，我也想让我的三个文本字段始终占据同一行。我的文本字段位于卡片内，我尝试用网格包裹文本字段但没有效果。

这是我的代码：

<CardContent style={{padding: "32px"}}>
                ....
                ....
                <Grid container spacing={24}>
                    <Grid item xs={12}>
                        <TextField
                            id="re_ps"
                            label="PS"
                            value={this.state.re_pe_value}
                            onChange={this.re_ps_handleChange('value')}
                            margin="normal"
                            type="number"
                            margin = "dense"
                            variant = "filled"
                            style={{paddingRight: "20px", width: "170px"}}
                        />
                        <TextField
                            id="re_mooe"
                            label="MOOE"
                            value={this.state.re_mooe_value}
                            onChange={this.re_mooe_handleChange('value')}
                            margin="normal"
                            type="number"
                            margin = "dense"
                            variant = "filled"
                            style={{paddingRight: "20px", width: "170px"}}
                        />
                        <TextField
                            id="re_co"
                            label="CO"
                            value={this.state.re_co_value}
                            onChange={this.re_co_handleChange('value')}
                            margin="normal"
                            type="number"
                            margin = "dense"
                            variant = "filled"
                            style={{paddingRight: "20px", width: "170px"}}
                        />
                    </Grid>
                </Grid>
            </CardContent>

有没有可能实现我想要的？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

将每个 TextField 包装在一个 Grid 组件中，您将获得所需的结果。

<Grid container spacing={24}>
    <Grid item xs={4}>
        <TextField
            id="re_ps"
            label="PS"
            value={this.state.re_pe_value}
            onChange={this.re_ps_handleChange('value')}
            margin="normal"
            type="number"
            margin = "dense"
            variant = "filled"
            style={{paddingRight: "20px", width: "170px"}}
        />
    </Grid>
    <Grid item xs={4}>
        <TextField
            id="re_mooe"
            label="MOOE"
            value={this.state.re_mooe_value}
            onChange={this.re_mooe_handleChange('value')}
            margin="normal"
            type="number"
            margin = "dense"
            variant = "filled"
            style={{paddingRight: "20px", width: "170px"}}
        />
    </Grid>
    <Grid item xs={4}>
        <TextField
            id="re_co"
            label="CO"
            value={this.state.re_co_value}
            onChange={this.re_co_handleChange('value')}
            margin="normal"
            type="number"
            margin = "dense"
            variant = "filled"
            style={{paddingRight: "20px", width: "170px"}}
        />
    </Grid>
</Grid>

【讨论】：

【解决方案2】：

尝试将 CardContent 的样式设置为 {display: 'flex'}，而不使用那些 Grid 容器。让 TextField 成为 CardContent 的直接子级

【讨论】：