选择元素没有出现在跨度元素右侧

Question

我有一个ul元素在左侧浮动，背景为红色。我有一个选择元素漂浮在右边。问题是select元素出现在跨度“Select”下面，我希望选择元素出现在文本“Select”的右侧。你知道为什么不工作吗？

HTML：

<section class="container" style="background:green;"> 
    <div class="content"> 
    <div class="main-search-results"> 
     <ul class="menu"> 
     <li>Item 1 <a href=""> <i class="fa fa-times" aria-hidden="true"></i></a></li> 
     </ul> 
     <div class="select fl-right"> 
     <span class="fl-left">Select</span> 
     <div class="select_b fl-left"> 
      <select class="oderby_option div div-small"> 
      <option selected>Option 1</option> 
      </select> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    outline: 0; 
} 

select{ 
    padding-left: 40px !important; 
} 


select { 
    padding: 15px; 
    width: 100%; 
} 

select{ 
    border: 0; 
    appearance: none; 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    cursor: pointer; 

} 


a { 
    text-decoration: none; 
} 

ul { 
    list-style: none; 
} 

.container { 
    float: left; 
    width: 100%; 
} 

.content { 
    width: 64%; 
    margin: 0 auto; 
    padding: 30px 0; 
} 

.fl-left { 
    float: left; 
} 

.fl-right { 
    float: right; 
} 

.fl-none { 
    float: none; 
} 


.ds_inline { 
    display: inline; 
} 

.ds_inblock { 
    display: inline-block; 
} 


.div { 
    width: auto; 
    float: left; 
} 

.div-small { 
    width: 22.75%; 
    margin-right: 3%; 
    margin-top: 3%; 
} 











.main-search-results li{ 
    float: left; 
    background-color: red; 
    padding: 10px; 
    margin-right:10px; 
    color:$color-white; 
    border:1px solid purple; 
    border-radius: 4px; 
} 
.main-search-results a{ 
    color: $color-white; 
} 

.select{ 
    border-radius: 0 !important; 
} 

.select span{ 
    margin-top: 15px; 
    font-weight: bold; 
    margin-right: 15px; 
} 


.select_b { 
    border: 1px solid red; 
    position: relative; 
    width: 100%; 
} 

.select_b:after { 
    content: "\F0D7"; 
    font-family: 'FontAwesome'; 
    position: absolute; 
    right: 10px; 
    top: 16px; 
    color: gray; 
    font-size: 1.2em; 
    z-index: 1; 

} 

.container { 
    float: left; 
    width: 100%; 
} 

.content { 
    width: 60%; 
    margin: 0 auto; 
    padding: 20px 0; 
} 

例子：https://jsfiddle.net/128m0v8n/

Answer 1

您可以.select一个flex行把文本，并选择一排，并用align-items来控制垂直对齐。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    outline: 0; 
 
} 
 

 
select { 
 
    padding-left: 40px !important; 
 
} 
 

 
select { 
 
    padding: 15px; 
 
    width: 100%; 
 
} 
 

 
select { 
 
    border: 0; 
 
    appearance: none; 
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    cursor: pointer; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
.container { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    width: 64%; 
 
    margin: 0 auto; 
 
    padding: 30px 0; 
 
} 
 

 
.fl-left { 
 
    float: left; 
 
} 
 

 
.fl-right { 
 
    float: right; 
 
} 
 

 
.fl-none { 
 
    float: none; 
 
} 
 

 
.ds_inline { 
 
    display: inline; 
 
} 
 

 
.ds_inblock { 
 
    display: inline-block; 
 
} 
 

 
.div { 
 
    width: auto; 
 
    float: left; 
 
} 
 

 
.div-small { 
 
    width: 22.75%; 
 
    margin-right: 3%; 
 
    margin-top: 3%; 
 
} 
 

 
.main-search-results li { 
 
    float: left; 
 
    background-color: red; 
 
    padding: 10px; 
 
    margin-right: 10px; 
 
    color: $color-white; 
 
    border: 1px solid purple; 
 
    border-radius: 4px; 
 
} 
 

 
.main-search-results a { 
 
    color: $color-white; 
 
} 
 

 
.select { 
 
    border-radius: 0 !important; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.select span { 
 
    font-weight: bold; 
 
    margin-right: 15px; 
 
} 
 

 
.select_b { 
 
    border: 1px solid red; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.select_b:after { 
 
    content: "\F0D7"; 
 
    font-family: 'FontAwesome'; 
 
    position: absolute; 
 
    right: 10px; 
 
    top: 16px; 
 
    color: gray; 
 
    font-size: 1.2em; 
 
    z-index: 1; 
 
} 
 

 
.container { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    padding: 20px 0; 
 
}

<section class="container" style="background:green;"> 
 
    <div class="content"> 
 
    <div class="main-search-results"> 
 
     <ul class="menu"> 
 
     <li>Item 1 
 
      <a href=""> <i class="fa fa-times" aria-hidden="true"></i></a> 
 
     </li> 
 
     </ul> 
 
     <div class="select fl-right"> 
 
     <span class="fl-left">Select</span> 
 
     <div class="select_b fl-left"> 
 
      <select class="oderby_option div div-small"> 
 
      <option selected>Option 1</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>