如何將收藏夾圖標放置在選擇輸入框中
[英]How to place favicon icon inside select input box
問題描述
我正在嘗試在下拉框中插入一個fa-chevron圖標，但它不起作用，它顯示在框外。
我試過更改邊距，但這不起作用。
這是當margin-right設置為 200 時：
這是沒有邊距的：
代碼：
<div class="col-md-8 d-flex" style="margin-top: -25px">
<select name="carlist" form="carform" class="form-control" id="exploreNeighbour" style="z-index: 2">
<option value="">I have no idea</option>
{% for venue in venue_category %}
<option value="{{ venue.name }}">{{ venue.name }}</option>
{% endfor %}
</select>
<i class="fas fa-chevron-down" style="pointer-events: none; z-index: 1; margin-right: 20px"></i>
</div>
2 個解決方案
解決方案1
2 2019-12-26 16:01:06
添加 z-index: 2; 和 margin-left: -20px; 到 fa-chevron-down
解決方案2
2 2019-12-26 17:04:35
問題
z-index是一個 CSS 屬性，它有一些必須遵守的標准：
元素（又名標簽）必須在以下任一
position具有position：relative、absolute或fixed。由於
<i>被移動到浮動在其他標簽上，<i>的父標簽（即<div>）需要有position: relative而<i>應該有position: absolute任何嵌套在
posrel(position: relative) 中的posab(position: absolute) 都可以使用以下屬性進行定位：left、right、top和bottom。看起來 OP 需要
<i>將 20px 移動到其原始位置的左側而不干擾其他標簽（即"floating" ）right: 20px應用於<i>會將<i>從其父標簽的右邊框向左移動 20px .此外，應用於父標簽的
margin-top: -25px看起來像是試圖將<i>垂直保持在中間。 如果是這樣，則將top: 50%添加到<i>並從div.d-flex刪除margin-top: -25px。
演示功能
Bootstrap 4 的樣板 HTML（也包括 Font Awesome 5 樣式表）
一個
<form>和兩個<select>。section#rowA.row select#A是默認的section#rowB.row select#B是所提供的版本的更正版本。
更正
section#B div.col-md-8.d-flex- 添加
position: relative - 移除
margin-top: -25px(見問題#5 )
- 添加
section#B i.fas.fa-chevron-down- 將
margin-right: 20px替換為right: 20px - 添加
position:absolute
- 將
都
select- 刪除了
z-index: 2（不知道為什么會有用）
- 刪除了
我默認添加了一個<select>以顯示正確配置 Bootstrap 時的外觀。 你真的需要額外的雪佛龍嗎？
<!DOCTYPE html> <html lang='en'> <head> <title>Bootstrap 4 Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" rel="stylesheet" crossorigin="anonymous"> <style> </style> </head> <body> <main class='container-fluid'> <form id='carform' class='form'> <section id='rowA' class='row'> <div class="d-flex col-md-8"> <select id="A" name="carlist" class="form-control" form="carform"> <option value="">I have no idea</option> <option value=""></option> </select> </div> <div class='col-md-4'>Second Column</div> </section> <hr> <section id='rowB' class='row'> <div class="d-flex col-md-8" style="position: relative"> <select id="B" name="carlist" class="form-control" form="carform"> <option value="">I have no idea</option> <option value=""></option> </select> <i class="fas fa-chevron-down" style="pointer-events: none; right: 20px; position: absolute; z-index: 2;"></i> </div> <div class='col-md-4'>Second Column</div> </section> </form> </main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <script> </script> </body> </html>
將引導程序選擇按鈕放在輸入框中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.