Semantic UI 内联按钮

Question

我有一个带标签的文本输入框，旁边放了一个按钮，用于除提交表单以外的其他操作。我将输入框（带标签）置于 twelve wide field 中，而按钮则在 four wide field 中：

<div class="two fields">
    <div class="twelve wide field">
        <label for="postalCodeMain">Postcode</label>
        <input type="text" id="postalCodeMain" value=""/>
    </div>
    <div class="four wide field">
        <div class="ui fluid bottom button" onclick="getLocations('Main');">Search for Address</div>
    </div>
</div>

问题在于按钮浮动到四个宽度的字段的顶部，因为输入框上面有标签，有什么最好的方法可以使按钮与输入框内联呢？

我尝试了许多方法，但是将标签放在字段外会导致标签和输入框之间出现过多的间隙，而在按钮顶部添加一个空标签似乎是浪费的...?

这里是我在 JSFiddle 上尝试的方法。

我是否遗漏了按钮div的某个类？

- annoyingmouse

Answer 1

看来我有点蠢，阅读了更多文档后，我明白这非常简单：

    <div class="field">
        <label for="postalCode05">Postcode</label>
        <div class="ui action input">
            <input type="text" id="postalCode05" placeholder=""/>
            <button class="ui button">Search</button>
        </div>
    </div>

我更新后的JSFiddle中有示例。

- annoyingmouse