Css 通过覆盖样式道具使材质ui组件内联显示

我试图让一个复选框出现在输入字段“answer input one”的右侧。我尝试过使用display属性，但通常来说，我很难使用css布局

以下是呈现答案输入的代码：

     <div>
  <TextField
  hintText="An informative question title..."
  fullWidth
  floatingLabelText="Question Title"
  value={questionTitle}
  onChange={(e) => this.props.questionTitleChanged(e.target.value)}
  />
  <TextField
  floatingLabelText="Answer Input 1"
  onChange={(e) => this.props.questionInputChanged({
    inputIndex: 0,
    value: e.target.value,
    correct: false
  })}
  value={questionInputs[0].value}
  style={styles.answerField}
  />

  <Checkbox
  onCheck={() => {
    let correctOrIncorrect = null;

    if (questionInputs[0].correct) {
      correctOrIncorrect = false;
    } else { correctOrIncorrect = true; }

    this.props.questionInputChanged({
    inputIndex: 0,
    value: null,
    correct: correctOrIncorrect });
  }}
  style={styles.checkbox}
  />

  </div>

我们将非常感谢您的帮助！以及任何关于css布局的建议

---

谢谢。

我将复选框的css更改为：

checkbox: {
    float: 'right',
    width: '10%',
    marginTop: '7%'
  }

就像以前一样，是全幅的。这不是一个很好的解决方案，但无论如何都可以实现

您可以使用flexbox：

render() {
    return (
        <div style={{ display: 'inline-flex' }}>
            <div>
                <TextField />
            </div>
            <div style={{ alignSelf: 'center' }}>
                <Checkbox />
            </div>
        </div>
    );
}

render（）{
返回(
);
}

---

不客气。如果这个答案对你有效，你能设置为“已回答”吗？非常感谢。

render() {
    return (
        <div style={{ display: 'inline-flex' }}>
            <div>
                <TextField />
            </div>
            <div style={{ alignSelf: 'center' }}>
                <Checkbox />
            </div>
        </div>
    );
}