Css ReactJS水平对齐材质ui元素

我试图在文本输入旁边有一个单选按钮，这样用户基本上可以输入一个问题的“答案”，并标记一个首选项。然而，Material UI将每个元素放在自己的行上

这就是我目前拥有的：

<div>
   <RadioButton
      value="light"
   />
   <TextInput
       hintText="Answer"
       multiLine = {true}
   />
</div>

---

您有一个

样式

对象可用于覆盖材质Ui中元素的默认样式。 使用该选项并将“显示”设置为“内联块”

display: inline-block;

我正在使用for layout with material ui，它有助于解决许多问题，并使代码更明确地描述布局（加上它的反应性）

---

为了记录在案，我用。。。做了这样的事情：

      <div className="row">
        <div className="col-md-2">
          Type:
        </div>
        <div className="col-md-10">
          <RadioButtonGroup
             className="row"
             name="type">
            <RadioButton
               className="col-md-4"
               value="other"
               label="Other" />
            <RadioButton
               className="col-md-4"
               value="custom"
               label="Custom" />
          </RadioButtonGroup>
        </div>
      </div>

类型：

@erichardson30它解决了您的问题还是您需要其他东西？我还没有机会尝试它，但我今天会，我会告诉您我在每个元素中添加了style={{display:'inline block'}}，但这并没有造成任何问题difference@WitVault这对我来说很有效，但不是很灵活。最终我选择了

react inline grid

。花了大约2分钟。@Trenton我刚试过

react inline grid

，但我遇到了一个错误，说了些关于react redux的话，似乎需要react redux:/Awesome find。此功能需要在材质UI中正确使用。水平布局现在在材质UI中很难使用。

是

参数是现成的，还是需要安装引导程序？根据您的回答，我找到了与之相似但在断点处更明确的选项。谢谢大家，我将检查这两个选项@LarryMaccherone根本不需要引导。。。这只是材料界面

is

只是

react inline Grid

      <div className="row">
        <div className="col-md-2">
          Type:
        </div>
        <div className="col-md-10">
          <RadioButtonGroup
             className="row"
             name="type">
            <RadioButton
               className="col-md-4"
               value="other"
               label="Other" />
            <RadioButton
               className="col-md-4"
               value="custom"
               label="Custom" />
          </RadioButtonGroup>
        </div>
      </div>