css之前没有对齐到正确的div

Question

我正在创建一个下拉列表，但字体真棒向下箭头没有显示在正确的div中；fbox"；div显示在"；sbox"；分区

HTML看起来像这个

<div class="fbox">
<select class="search_dropdown" name="search_dropdown" id="search_dropdown">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="sbox"> 
<input type="text" class="search_filter" id="search_filter" placeholder="Search for names..">
</div>

CSS看起来像这个

.fbox select {
background-color: #F8F8F8;
color: #33333;
padding: 12px;
width: 250px;
border: none;
font-size: 16px;
-webkit-appearance: button;
appearance: button;
outline: none;
border-radius: 5px 0px 0px 5px;
}
.fbox::before {
content: "f13a";
font-family: FontAwesome;
position: absolute;
top: 0;
right: 0;
}

这张票的关键是。https://jsfiddle.net/us40hw16/1/

Answer 1

如果要对齐任何absolute元素，必须将position: relative设置为其父元素。

• 您需要将position: relative设置为fbox，以便对齐选择框的font-awesome图标
• 在.fbox select中将appearance和-webkit-appearance更改为none以隐藏其默认箭头
• 在.fbox::before中添加pointer-events: none，以便您的下拉列表可以点击箭头
• 此外，必须将position: relative设置为.sbox以防止图标未来的对齐问题

.search_wallview {
overflow: visible!important;
}
.search_intro {
margin-top: 30px;
background-color:#005959;
color:#FFFFFF;
font-size: 16px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
height: 600px; 
background-position: center;
background-repeat: no-repeat; 
background-size: cover; 
}
.search_position {
position: relative;
padding: 4px 0 10px 0;
max-width: 800px;
margin: 250px auto 0 auto;
}
.search_inputgroup {
position: relative;
display: flex;
width: 100%;
}
#search_filter{
font-size: 16px; /* Increase font-size */
padding: 12px 20px 13px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
border-radius: 0px 5px 5px 0px;
width: 100%; /* Full-width */
}
.sbox {
width: 60%; /* Full-width */
position: relative;
}
.sbox::before {
content: "f002";
font-family: FontAwesome;
position: absolute;
top: 10px;
right: 20px;
color: #333;
}
.search_dropdown{
display:inline-block;
width: 40%; /* Full-width */
height: 47px; 
}
.search_result {
background-color:white;
color:black;
padding: 4px 0 10px 0;
max-width: 790px;
max-height: 200px;
overflow: auto;
margin:auto;
}
.search_line {
height: 30px;
line-height: 30px;
}
.search_line:hover {
background-color: #EFEFEF;
}
/* Drop down css  */
.fbox {
position: relative;
}
.fbox select {
background-color: #F8F8F8;
color: #33333;
padding: 12px;
width: 250px;
border: none;
font-size: 16px;
-webkit-appearance: none;
appearance: none;
outline: none;
border-radius: 5px 0px 0px 5px;
}
.fbox::before {
content: "f13a";
font-family: FontAwesome;
position: absolute;
top: 15px;
right: 3px;
color: #4d4d4d;
pointer-events: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search_wallview">
<div class="search_intro">  
<div class="search_position">
<div class="search_inputgroup">
<div class="fbox">
<select class="search_dropdown" name="search_dropdown" id="search_dropdown">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="sbox"> 
<input type="text" class="search_filter" id="search_filter" placeholder="Search for names..">
</div>
</div>
</div>
<div id="search_result" class="search_result">line</div>
</div>
<div style="clear: both;"></div>
</div>

链接到JSFiddle

Answer 2

当您使用绝对定位时，它会将自己相对于最近的未静态定位的父对象进行定位。您需要制作.fboxposition: relative，以便：before元素与之右侧对齐。

你还需要让图标变成白色以外的颜色，这样它才能被看到。