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：右对齐/浮动按钮

1 个答案: