如何将收藏夹图标放置在选择输入框中

Question

我正在尝试在下拉框中插入一个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>

Answer 1

添加 z-index: 2; 和 margin-left: -20px; 到 fa-chevron-down

Answer 2

问题

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>

如何将收藏夹图标放置在选择输入框中

问题描述

2 个解决方案

解决方案1
2 2019-12-26 16:01:06

解决方案2
2 2019-12-26 17:04:35

问题

演示功能

更正

如何将收藏夹图标放置在选择输入框中

问题描述

2 个解决方案

解决方案1 2 2019-12-26 16:01:06

解决方案2 2 2019-12-26 17:04:35

问题

演示功能

更正

解决方案1
2 2019-12-26 16:01:06

解决方案2
2 2019-12-26 17:04:35