How can I make button float only in div area?
Here is my example CSS and HTML.
Change display:inline to display:inline-block
.test {
width:200px;
display:inline-block;
overflow: auto;
white-space: nowrap;
margin:0px auto;
border:1px red solid;
}
You can use justify-content: space-between in .test
like so:
.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:
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>