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

Question

我一直在尝试在“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 片段:

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

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

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

关于如何排列这些组件，或者找到更好的方法来做到这一点，有什么建议吗？非常感谢任何帮助!!

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