语义UI：右aligned/floated按钮

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/

语义UI：右aligned/floated按钮

Semantic UI: right aligned/floated button

html

css

semantic-ui