React组件布局问题：如何让PieChart与表单横向并排显示

要实现PieChart和两个表单横向并排，同时解决遮挡问题，只需对父容器布局和元素样式做以下调整：

• 给包含表单和PieChart的外层容器添加Flex布局，让子元素横向排列
• 修正PieChart的位置参数，避免偏移导致的显示异常
• 优化表单的间距和边框样式，确保整体布局协调

修改后的完整代码如下：

return(
    <>
        <div>
            <h1 style={{textAlign: "center", backgroundColor: 'grey'}}>Calorie Counter</h1>
            <h1 style={{textAlign: 'center', fontSize: '22px'}}>DAILY INTAKE:  {currentCals} / {calorieIntake} | 
            PROTEIN : {currentProtein} / {maxProtein} | FATS: {currentFats} / {maxFats} | CARBS : {currentCarbs} / {maxCarbs} </h1>
            
            {/* 新增Flex容器，实现横向排列 */}
            <div style={{display: 'flex', gap: '20px', padding: '0 20px', flexWrap: 'wrap'}}>
                <form style={{display: 'flex', flexDirection: 'column', border: '1px solid black', width: '230px', marginTop: '30px', padding: '10px'}} 
                onSubmit={(event) => calculateCaloricIntake(event)}>       
                
                <h1 style={{fontSize: '15px'}}>CALCULATE CALORIC INTAKE</h1>
                
                <FormControl required style={{marginBottom: '10px'}}>
                    <InputLabel>Sex</InputLabel>               
                        <Select value={sex} id='selectSex' onChange={(event) => setSex(event.target.value)} sx={{width: 150} }>
                            <MenuItem value='Male'>Male</MenuItem>
                            <MenuItem value='Female'>Female</MenuItem>
                        </Select> 
                </FormControl>
                <FormControl style={{marginBottom: '10px'}}>
                    <TextField required placeholder="Age" onChange={(event) => setAge(event.target.value)} inputProps={{maxLength: 2}} sx={{width: 150}} ></TextField>
                    <TextField required placeholder="Weight" onChange={(event) => setUserWeight(event.target.value)} inputProps={{maxLength: 3}} sx={{width: 150}}  ></TextField>         
                </FormControl>
                <FormControl style={{marginBottom: '10px'}}>        
                    <InputLabel>Height in Feet</InputLabel>
                    <Select value={heightFeet} onChange={(event) => setHeightFeet(event.target.value)} sx={{width: 150}} required>
                        <MenuItem value={5}>5</MenuItem>
                        <MenuItem value={6}>6</MenuItem>
                    </Select>
                </FormControl>

                <FormControl style={{marginBottom: '10px'}}>
                    <InputLabel>Height in Inches</InputLabel>
                    <Select value={heightInches} onChange={(event) => setHeightInches(event.target.value)} sx={{width: 150 }} required>
                        <MenuItem value={1}>1</MenuItem>
                        <MenuItem value={2}>2</MenuItem>
                        <MenuItem value={3}>3</MenuItem>
                        <MenuItem value={4}>4</MenuItem>
                        <MenuItem value={5}>5</MenuItem>
                        <MenuItem value={6}>6</MenuItem>
                        <MenuItem value={7}>7</MenuItem>
                        <MenuItem value={8}>8</MenuItem>
                        <MenuItem value={9}>9</MenuItem>
                        <MenuItem value={10}>10</MenuItem>
                        <MenuItem value={11}>11</MenuItem>
                    </Select>
                </FormControl>
                     
                <FormControl style={{marginBottom: '10px'}}>
                     <InputLabel>Activity Level</InputLabel>
                        <Select required value={activityLevel} onChange={(event) => setActivityLevel(event.target.value)} sx={{width: 150}}>
                            <MenuItem value={1.2}>Sedentary</MenuItem>
                            <MenuItem value={1.375}>Slightly Active</MenuItem>
                            <MenuItem value={1.55} >Moderately Active</MenuItem>
                            <MenuItem value={1.725}>Very Active</MenuItem>
                            <MenuItem value={1.9}>Extremely Active</MenuItem>
                        </Select>
                </FormControl>

                <Button sx={{justifyContent: 'left'}} type="submit">Submit</Button>

                </form>
                
                
                <FormControl sx={{ flexDirection: 'column', border: '1px solid black', width: '230px', height: '300px', marginTop: '30px', padding: '10px'}}>
                    <form onSubmit={(e) => submitForm(e)} required>
                        <h1 style={{fontSize: '15px'}}>ADD FOOD</h1>
                        <TextField placeholder='Calories' sx={{width: '200px', marginBottom: '10px'}} id="calories" required ></TextField>
                        <TextField placeholder='Protein' sx={{width: '200px', marginBottom: '10px'}} id="protein" required ></TextField>
                        <TextField placeholder='Fats' sx={{width: '200px', marginBottom: '10px'}} id="fats" required></TextField>
                        <TextField placeholder='Carbs' sx={{width: '200px', marginBottom: '10px'}} id="carbs" required></TextField>
                        <Button type="submit" > Add Food</Button>
                    </form>

                </FormControl>

                {/* 调整PieChart参数，确保完整显示 */}
                <div style={{marginTop: '30px'}}>
                    <PieChart data={pieData} radius='80' center={[100, 100]} ></PieChart>
                </div>
            </div>
        </div>
    </>
)

关键修改说明： #

1. Flex容器：新增的div设置display: flex实现横向排列，gap控制元素间距，flexWrap保证小屏幕自动换行适配。
2. 表单样式优化：统一使用完整边框，添加内边距和元素间距，让内部布局更合理。
3. PieChart调整：增大radius让图表可见，修正center参数避免偏移，添加外层容器对齐顶部间距。
4. 无效样式清理：移除了第二个FormControl中无效的display: left和alignItems: right属性。

内容的提问来源于stack exchange，提问作者TheTargetAudience