Html div内的左/右浮动按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18006694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Left/Right float button inside div
提问by Mohd Shahril
How can I make button float only in div area?
如何让按钮只在 div 区域浮动？
Here is my example CSS and HTML.
这是我的示例 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>I want it to be like this.
我希望它是这样的。
回答by Ahmed Alaa El-Din
Change display:inline to display:inline-block
将 display:inline 更改为 display:inline-block
.test {
width:200px;
display:inline-block;
overflow: auto;
white-space: nowrap;
margin:0px auto;
border:1px red solid;
}
回答by Penny Liu
You can use justify-content: space-betweenin .testlike so:
您可以使用justify-content: space-between在.test像这样：
.test {
display: flex;
justify-content: space-between;
width: 20rem;
border: .1rem red solid;
}<div class="test">
<button>test</button>
<button>test</button>
</div>For those who want to use Bootstrap 4 can use justify-content-between:
对于那些想要使用 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>