Question

我正在尝试将按钮调整到最右侧，但未成功。这是我的尝试。

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

Answer 1

我们还可以使用float属性对齐。

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

Answer 2

您必须在父元素中定义以对齐子元素中的项目。

<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
   <button>
          Click here
   </button>
</div>

Answer 3

您需要将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'}}在父元素中定义，以对齐子元素中的项目。

右对齐按钮reactjs

3 个答案: