语义 UI 内联按钮答案

【问题标题】：Semantic UI inline button语义 UI 内联按钮
【发布时间】：2015-07-21 18:14:27
【问题描述】：

我有一个带有标签的文本输入，在它旁边我放置了一个按钮来执行其他操作，而不是提交输入和按钮所在的表单。我将输入（带标签）放在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>

问题是按钮浮动到four wide field 的顶部，因为输入上方有标签，让按钮与输入内联的最佳方法是什么？

我尝试了多种方法，但是将标签放在字段之外会导致标签和输入之间的间隙过大，并且在按钮顶部添加空标签让我觉得很浪费......？

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

我是否缺少按钮 div 的类？

【问题讨论】：

标签： semantic-ui

【解决方案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中的示例

【讨论】：