javascript - 右对齐按钮reactjs

Question

我正在尝试将按钮对齐到最右边但没有成功。这是我的尝试。

<Button variant="contained" style={{display: 'flex', justifyContent: 'right'}} color="primary" className="float-right" onClick={this.onSend}>

Answer 1

您需要将 display flex 添加到 Button 的父元素。

例如，请参阅此处的沙箱:https://codesandbox.io/s/testproviderconsumer-klcsr

class App extends React.Component {
  render() {
    return (
      <div style={{ display: "flex" }}>
        <button
          style={{ marginLeft: "auto" }}
        >
          Click
        </button>
      </div>
    );
  }
}

{{display: 'flex', justifyContent: 'flex-end'}} 在父元素中定义以对齐子元素中的元素。