ReactJS align material-ui elements horizontally

问题

I am trying to have a radio button next to a text input so essentially a user can input "answers" to a question and mark one preferred. However, Material-UI puts each on it's own line.

This is what I currently have :

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

回答1:

Just for the record, I managed to align radio buttons using flexboxgrid... Did something like this:

      <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>

回答2:

I'm using react-inline-grid for layout with material-ui, it helps solve many problems and makes code more explicit about layout (plus it's reactive).

<Grid>
  <Row is="nospace start">
    <Cell is="9 tablet-6 phone-3">
       <TextField ... />
    </Cell>
    <Cell is="middle 3 tablet-2 phone-1">
       <RaisedButton ... />
    </Cell>
  </Row>
</Grid>

回答3:

You have a style object available to override the default styles of the element in Material-Ui. Use that and set display to inline-block.

display: inline-block;

来源：https://stackoverflow.com/questions/35995511/reactjs-align-material-ui-elements-horizontally