這個問題在這里已經有了答案: 在 CSS Flexbox 中,為什么沒有“justify-items”和“justify-self”屬性? (6 個回答) 1 小時前關閉。
我正在嘗試在左端創建一個搜索框,在右端創建一個箭頭。浮動不作業,箭頭非常接近搜索框。也試過 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>
uj5u.com熱心網友回復:
浮動屬性不適用于彈性框屬性。您可以嘗試使用 justify-content來對齊元素
例子:
justify-content: space-between;
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/338338.html
標籤:html css bootstrap-4
