顶部带有标签的内嵌式下拉框

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/