J0nes J0nes - 3 years ago 124
CSS Question

Select element is not appearing at the right of the span element

I have a ul element floated at left with red background. And I have a select element floated at right. The issue is that the select element is appearing below the span"Select" and I want that the select alement appears at the right of the text "Select". Do you know why is not working?

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;
}


Example: https://jsfiddle.net/128m0v8n/

Answer Source

You can make .select a flex row to put the text and select in a row, and use align-items to control the vertical alignment.

* {
  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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download