语义 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测试

提前致谢！:)

Answer 1

元素是inline-flex( inline-block)，这就是为什么您必须使用 手动换行<br />。

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