仅使用css跨越对侧的按钮

Question

我的模态上有这两个按钮，让用户下一步或重新开始表单进度。

我想将这些按钮切换到模态的整个宽度，我尝试了以下代码：

<div className="form-button">
  <button className="btn btn-secondary btn-width-75 reset-button" onClick={this.resetFilter.bind(this)}><img alt="Revise recommendations" src="/img/icons/redo.svg" className="button-image"/>Restart</button>
  <button className="btn btn-secondary btn-width-75 next-button" onClick={this.nextButton.bind(this)}>Next<i className="icon-right"></i></button>
</div>

和我的css：

.form-button {
  width: 500px;
  display:inline-block;
  overflow: auto;
  white-space: nowrap;
  margin:0px auto;
}

.reset-button {
  float: left;
}

.next-button {
  float: right;
}

我的预期输出是：

|| <RestartButton>      --modal width--          <NextButton> ||

我该怎么做？

Answer 1

将className更改为class es，它会起作用：https://jsfiddle.net/yak613/yndrnvvo/

<div class="form-button">
  <button class="btn btn-secondary btn-width-75 reset-button" onClick={this.resetFilter.bind(this)}>Restart</button>
  <button class="btn btn-secondary btn-width-75 next-button" onClick={this.nextButton.bind(this)}>Next<i class="icon-right"></i></button>

</div>

Answer 2

.form-button {
  width: 500px;
  display: flex;
  overflow: auto;
  white-space: nowrap;
  margin: 0 auto;
  justify-content: space-between;
  background-color: #eee;
}

<div class="form-button">
  <button class="btn btn-secondary btn-width-75 reset-button" onClick={this.resetFilter.bind(this)}>
    <img alt="" src="/img/icons/redo.svg" class="button-image" />Restart</button>
  <button class="btn btn-secondary btn-width-75 next-button" onClick={this.nextButton.bind(this)}>Next<i className="icon-right"></i>
  </button>
</div>