div內的左/右浮動按鈕

Question

如何讓按鈕只在 div 區域浮動？

這是我的示例 CSS 和 HTML。

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

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

我希望它是這樣的。

Answer 1

將 display:inline 更改為 display:inline-block

.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>