Question

我无法在div中放置两个按钮。我想在左侧使用tweet按钮，在右侧使用另一个按钮“ Next Quote”。我试图将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; }

Answer 2

尝试这种方式。很简单。但这有效

<ul class="main-nav">
    <li class=""><a href="index.php" class="logo"><img src="images/logo.svg" alt=""></a>
    </li>

    <div class="">
        <li><a href="index.php" class="menu" data-wow-duration="1s" data-wow-delay="0.2">Home</a>
        </li>

    </div>
</ul>

.main-nav {
display: flex;
}

.main-nav li:first-child {
margin-right: auto;
z-index: 3;

}

Answer 3

首先，将每个按钮包装在div中：

scratch.py

然后添加一些CSS来控制这些div中的内容：

preprocess

Answer 4

您也可以尝试以下解决方案：

<div class="buttons">
      <button className="twitter-btn">Tweet</button>

      <button className="btn-primary">Next Quote</button>
</div>

样式如下：将marginLeft添加到要向左按下的按钮

.buttons {
        display: flex;
}

.btn-primary {
        marginLeft: auto;
        backgroundColor: red;
}

如何在同一行中向左移动两个按钮，向右移动另一个按钮？

4 个答案: