Question

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

这是我的代码：

<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>

能否实现我想要的？

Answer 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>

Answer 2

尝试在没有那些Grid容器的情况下将CardContent的样式设置为{display: 'flex'}。让TextFields作为CardContent的直接子代

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

2 个答案: