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内的ui form配对。

<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/

带有标签的内联下拉列表

1 个答案: