div内的左/右浮动按钮

Question

如何让按钮只在div区域浮动？

这是我的示例css和html ..

HTML

<div class='test'>
  <div style='float: left;'>
    <button>test</button>
  </div>
  <div style='float: right;'>
    <button>test</button>
  </div>
</div>

CSS

.test {
  width:60%;
  display:inline;
  overflow: auto;
  white-space: nowrap;
  margin:0px auto;
}

或者你可以在这里看到实时样本 - ＆gt; http://jsfiddle.net/ELAVS/

我希望它像这样..

Answer 1

更改显示：内联显示：内联块

.test {
  width:200px;
  display:inline-block;
  overflow: auto;
  white-space: nowrap;
  margin:0px auto;
  border:1px red solid;
}

Answer 2

您可以在.test中使用justify-content: space-between，如下所示：

.test {
  display: flex;
  justify-content: space-between;
  width: 20rem;
  border: .1rem red solid;
}

<div class="test">
  <button>test</button>
  <button>test</button>
</div>

---

对于那些想要使用Bootstrap 4的用户可以使用justify-content-between：

div {
  width: 20rem;
  border: .1rem red solid;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-between">
  <button>test</button>
  <button>test</button>
</div>