如何在同一个内联中将两个按钮一个向左移动另一个向右移动？

Question

我在 div 中放置两个按钮时遇到问题。我想要左侧的推文按钮和右侧的另一个按钮“下一个报价”。我曾尝试使用绝对位置移动 Next-Quote 按钮，但是当我尝试将其向右移动时，它只移动了一半而不是完全移动。我也试过向右浮动和向右拉，它仍然不起作用。我不知道该怎么做。帮助...

<div className="container col-md-6 col-sm-offset-3">
  <div id="quote-box">
    <h4 id="text" className="text-md-center"> {this.props.quote.quote}</h4>
    <p id="author" className="text-md-right">- {this.props.quote.author}</p>
  <div className="buttons btn-toolbar">
    <a 
      href="https://twitter.com/share?ref_src=twsrc%5Etfw" 
      className="twitter-btn twitter-share-button"
      data-size="large"
      data-show-count="false"
     >Tweet
     </a>
     <button
       id="new-quote"
       className="btn btn-primary btn-xs pull-right"
       onClick={this.onClick.bind(this)}
     >Next Quote
     </button>
  </div>
 </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
#quote-box {
  padding: 20px;
  border-radius: 10px;
  background-color: red;
}

.btn-toolbar {
  display: flex;
  justify-content: space-between;
}

#new-quote {
  font-size: 13.5px;
  padding: 3px;
}

Answer 1

这对我有用：

HTML：

<div class="left-btn">
    <button class="btn"></button>
</div>
<div class="right-btn">
    <button class="btn"></button>
</div>

CSS：

.left-btn { float: left; }
.right-btn { float: right; }