選擇選項菜單，並具有較大的寬度

Question

我想要一個佈局是這樣的：

對於即時通訊使用下面的代碼。但是右上角的選擇菜單選項不能正常工作。該選擇選項不在右側對齊，而選擇元素非常小。我在這裏的例子是https://jsfiddle.net/uhnz45nm/，有些背景更清晰。

你知道問題在哪裏嗎？如何把這個選擇選項菜單放在右側，並且在選擇元素中有左邊的文字和右邊的圖標字體？

HTML：

<div class="container background-light m_top m_bottom"> 
     <div class="test div"> 
     <div class="menu"> 
      <ul class="menu-items"> 
      <li><a href="">Item 1</a></li> 
      <li><a href="">Item 2</a></li> 
      <li><a href="">Item 3</a></li> 
      </ul> 

      <div class="menu-select"> 
       <span>Order by</span> 
       <i class="fa fa-caret-down" aria-hidden="true"></i> 
       <form> 
       <select> 
       <option selected>Item 1</option> 
       </select> 
       </form> 
      </div> 

    </div> 
    <div class="side">sidebar</div> 
    <div class="main">main</div> 
    </div> 
</div> 

CSS：

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

ul{ 
    list-style:none; 
} 

/*.test{display:flex;}*/ 


input, 
select, 
textarea, 
button { 
    padding: 15px; 
    width: 100%; 
} 

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

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

.div { 
    width: 92%; 
    margin: 0px auto; 
} 


.menu{ 
    display: flex; 
    align-items:center; 
    justify-content:space-between; 
    background-color: yellow; 
} 
.menu-items{ 
    display: flex; 
    align-items:center; 
    flex-basis:40%; 
} 
.menu-select{ 
    display: flex; 
    align-items:center; 
    background-color: red; 
    flex-basis:60%; 
} 

.menu-select select{ 
    border:1px solid gray; 
} 

.menu-items li{ 
    margin-right: 15px; 
} 

.menu-items a{ 
    padding: 10px; 
} 

.div-content{ 
    display:flex; 
} 

Answer 1

可悲的是，你不能將圖標爲this answer描述添加到選擇的選項。

如果你想樣式選擇男孩沒有圖標，你可以使用下面的CSS：

.menu-select{ 
    display: flex; 
    align-items:center; 
    background-color: red; 
    flex-basis:60%; 
    align-items: center; 
    justify-content: center; 
} 

#item-select { 
    margin: 10px; 
    width: 150%; 
} 

這將居中選擇菜單，並在容器中，並與#item-select屬性width文本你可以將您選擇的寬度設置爲您喜歡的值。 Here is the full working example.