为什么浮动左和右不工作在这种情况下?

Question

我试图使搜索框在左端和箭头在右端。浮动不工作，箭头非常接近搜索框。也尝试了left:0px和right:0px。有人能帮忙吗?谢谢你。

.candidate {
display: flex;
width: 100%;
}
.candidate-search {
width: 50%;
float: left;
}
.pagearrow {
display: flex;
float: right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="col-xl-7 col-lg-7 col-md-7">
<div class="conatiner-fluid">
<div class="row">
<div class="candidate">
<div class="candidate-search">
<input class="filter-searchbox py-2" type="search" name="search" placeholder="Search" />
</div>
<div class="pagearrow">
<span class="material-icons">arrow_back_ios</span>
<span class="material-icons">arrow_forward_ios</span>
</div>
</div>
</div>
</div>
</div>

Answer 1

Float 属性在伸缩盒上不起作用财产。你可以试着用对齐元素

的例子:

justify-content: space-between;