頂部帶有標籤的內嵌式下拉框

Question

我試圖製作兩個內嵌式下拉框（我得到了工作），標籤在彼此頂部（不工作）。我也希望這兩個是相同的寬度。

這是多遠我得到：

<span class="ui inline"> 
    <label for="roles">Add roles to user</label><br> 
    <select id="roles" multiple="" class="ui dropdown"> 
     <option value="">Roles</option> 
     <option value="Role1">Role 1</option> 
     <option value="Role2">Role 2</option> 
     <option value="Role3">Role 3</option> 
    </select> 
    <label for="sites">Add sites to user</label> 
    <select id="sites" class="ui dropdown"> 
     <option value="">Sites</option> 
     <option value="Role1">Site 1</option> 
     <option value="Role2">Site 2</option> 
     <option value="Role3">Site 3</option> 
    </select> 
</span> 

繼承人JSFiddle

Answer 1

不知道，如果你特別想用語義UI 直列類來處理你的內聯，所以我繼續在這個例子中使用它。

inline類通常與內的fields配對。

<div class="ui form"> 
<span class="inline fields"> 
    <div class="field"> 
    <label for="roles">Add roles to user</label><br> 
    <select id="roles" multiple="" class="ui dropdown"> 
     <option value="">Roles</option> 
     <option value="Role1">Role 1</option> 
     <option value="Role2">Role 2</option> 
     <option value="Role3">Role 3</option> 
    </select> 
    </div> 
    <div class="field"> 
    <label for="sites">Add sites to user</label><br> 
    <select id="sites" class="ui dropdown"> 
     <option value="">Sites</option> 
     <option value="Role1">Site 1</option> 
     <option value="Role2">Site 2</option> 
     <option value="Role3">Site 3</option> 
    </select> 
    </div> 
</span> 
</div> 

https://jsfiddle.net/nw949qwz/