Semantic UI: 右对齐/浮动按钮

Question

我该如何使用Semantic-UI将按钮正确地对齐到右侧？我尝试过以下方法：

            <div class="ui mini labeled input">
                <div class="ui label">Description</div>
                <input placeholder="Privat" type="text">
            </div>
            <div class="ui floated right red mini button">
                Remove
            </div>
            <br />

但是按钮总是在输入框下面。除了正确的解决方案，你能解释一下为什么会出现这种情况吗？我需要使用网格布局吗？

此外还有第二个问题：

两个带标签的输入框，例如：

            <div class="ui mini labeled input">
                <div class="ui label">description</div>
                <input placeholder="Privat" type="text">
            </div><br/>
            <div class="ui mini labeled input">
                <div class="ui label">another description</div>
                <input placeholder="Privat" type="text">
            </div>

这两个长度不同，既不是灰色标签也不是总输入字段。它们能对齐吗？

jsfiddle测试

提前感谢！ :)

- user2084865

Answer 1

元素采用inline-flex (inline-block)布局，因此您需要使用<br />手动换行。

请参见：https://jsfiddle.net/4p6d7x86/2/

- Alex

---

谢谢 :) 我有一个奇怪的问题：我的元素是 display: table 而不是 inline-flex。与 jsfiddle 的类比较 .ui.labeled.input 和我的真实代码。你有什么想法吗？ - user2084865

在这种情况下，将子元素的display更改为table-cell。 - Alex

好像我没有使用当前的SemanticUI版本。更新后，一切都按预期工作了。 - user2084865