如何将卡片内的所有内容对齐？答案

【问题标题】：How to align everything in a row inside a card?如何将卡片内的所有内容对齐？
【发布时间】：2021-01-13 18:49:03
【问题描述】：

我有以下卡，代码如下。我想把所有东西排成一排，因为现在它是一个在另一个之下。是否有任何选项可以将所有内容对齐单行而不是三行，

<div class="container">
            <form onSubmit={submitHandler}>
                <div class="row" style={{ width: "300px", marginTop: "40px", marginLeft: "70px", height: "450px" }}>
                    <FormControl variant="outlined">
                        <InputLabel id="demo-simple-select-outlined-label" >Choose Module Type</InputLabel>
                        <Select style={{ marginBottom:"20px"}}
                            name="name"
                            labelId="demo-simple-select-outlined-label"
                            id="demo-simple-select-outlined"
                            onChange={handleDropdownChange}
                            label="TypeList"
                        >
                            {
                                dropdown.map(options =>
                                    <MenuItem value={options["moduleType"]} >{options["moduleType"]}</MenuItem>
                                )}
                        </Select>
                        <TextField 
                            style={{ marginTop: "10px", marginBottom:"20px" }}
                            id="outlined-helperText"
                            label="Module Name"
                            onChange={handleChangeModuleName}
                            variant="outlined"
                        />
                        <TextField
                            style={{ marginTop: "20px" }}
                            id="outlined-helperText"
                            label="Course Duration"
                            onChange={handleChangeDuration}
                            variant="outlined"
                        />
                        <div style={{ margin: "auto", marginTop: "20px" }}>
                        <Button type="submit" variant="contained" color="primary">ADD</Button>
                      </div>
                    </FormControl>
                </div>
            </form>
         </div>

请帮忙:) 谢谢

【问题讨论】：

CSS flexbox 应该可以在这里工作，因为它们可以使它们垂直和水平居中，在此处阅读更多关于 flexbox css-tricks.com/snippets/css/a-guide-to-flexbox

标签： css reactjs material-ui

【解决方案1】：

弹性容器扩展项目以填充可用空间或缩小它们以防止溢出。最重要的是，与常规布局（基于垂直的块和基于水平的内联）相比，flexbox 布局与方向无关。

尝试使用display: flex;。这将使所有项目保持连续。

.row {
    display: flex;
}

【讨论】：

【解决方案2】：

尝试与 flex 属性取得联系。在你的 css 样式表中添加这个

.row {
    display: flex;
}

总体上尽量避免使用 inline-stlyes（在 html 文件中使用 css 属性）。而是使用外部样式表（您可以将其称为 style.css）。您可以使用此行将其链接到您的 html 文件

<link rel="stylesheet" type="text/css" href="/style.css">

【讨论】：

【解决方案3】：

只需简单地将 display:'flex' 添加到您的行类中

.row{
     display:'flex'
 }

【讨论】：