语义UI：右对齐/浮动按钮 [英] Semantic UI: right aligned/floated button

问题描述

如何使用右侧的Semantic-UI正确对齐按钮？我试过这样的东西：

 < div class =ui mini labeled input> 
< div class =ui label>描述< / div> 
< input placeholder =Privattype =text> 
< / div> 
< div class =ui浮动右红色迷你按钮> 
删除
< / div> 
< br /> 
  

但按钮总是在输入栏下方。你能解释一下（除了正确的解决方案之外）为什么会发生这种情况？我必须使用网格吗？

除此之外的第二个问题：

两个标记的输入，例如

 < div class =ui mini labeled input> 
< div class =ui label> description< / div> 
< input placeholder =Privattype =text> 
< / div>< br /> 
< div class =ui迷你标签输入> 
< div class =ui label>另一个描述< / div> 
< input placeholder =Privattype =text> 
< / div> 
  

不具有相同的长度。无论是灰色标签还是总输入字段。这是可调整的吗？

jsfiddle test

预先致谢！ ：元素是 inline-flex （<$ c）： $ c> inline-block ），这就是为什么您必须使用< br /> 手动打破行。

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

How do I align a button correctly using Semantic-UI at the right? I've tried things like:

            <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 />

But the button is always below the input field. Could you explain (in addition to the correct solution) why this happens? Do I have to use a grid?

Second question beside this:

Two labeled inputs like

            <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>

Do not have the same length. Neither the gray label nor the total input field. Is this alignable?

jsfiddle test

Thanks in advance! :)

解决方案

The elements are inline-flex (inline-block), that's why you have to break the lines manually using <br />.

See: https://jsfiddle.net/4p6d7x86/2/

这篇关于语义UI：右对齐/浮动按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！