将 Material-UI 文本字段与段落对齐答案

【问题标题】：Lining up Material-UI Text Field with Paragraph将 Material-UI 文本字段与段落对齐
【发布时间】：2021-03-03 13:20:34
【问题描述】：

我一直在尝试在“mad-libs”风格的 React 应用程序中排列一些组件，但遇到了一些困难。这是情况的图像，箭头显示了所需的结果。要么我的 flexbox 代码关闭，要么我的 Material UI 文本字段的样式错误..

我使用 Flexbox 将两个组件对齐，但现在很难重新定位它们以匹配。这是我的 React 代码：（显示一个数组，该数组存储一个充满常规文本并需要输入的故事）

return(<div className = "storyContainer">
         {storyList.map((regulartext, index) => (
           <div className = "Parent">
              <div className = "Child1">
                {regulartext}
              </div>
              <div className = "Child2">
               <TextField
                 id="standard-input"
                 label={listFillIns[index]}
                 margin="normal" />
               </div>
             </div>))}
          </div>)

这是我的 CSS sn-p：

.storyContainer{
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
}

.Parent{
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
}

基本上我在这里要做的是将父级中的两个子组件排列在一起，然后将父母排列在一起。最终结果将与存储在{regulartext} 中的文本 sn-p 对齐，然后每个 Parent Div 对齐以减少故事中不必要的换行符。

关于如何排列这些组件或找到更好的方法来排列这些组件的任何提示？非常感谢任何帮助！

【问题讨论】：

标签： html css reactjs flexbox material-ui

【解决方案1】：

https://codesandbox.io/s/weathered-thunder-i2nih?file=/src/index.js

将align-items: center; 添加到父类

.Parent {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  align-items: center;
}

【讨论】：

【解决方案2】：

尝试将align-items: flex-end 添加到父级

【讨论】：