顶部带有标签的内联下拉菜单

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 class 来处理您的内联，所以我继续在这个例子。

inline class 通常在 ui form 内与 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/

顶部带有标签的内联下拉菜单

Inline Dropdowns with Labels on top

html

css

semantic-ui