语义 UI - 影响网格边距的浮动按钮

Question

网格的右边距按按钮的宽度向内推。

现在看看没有按钮 http://jsfiddle.net/3tL9msap/3 的情况，正如预期的那样，两侧的网格边距相等。

即使 <h1> 和 <button> 放在它们自己的 <div class="ui container"> 顶部，这个按钮仍然有这个效果。

如果这种行为是预料之中的，我如何在不影响网格边距的情况下右对齐按钮？

HTML:

<div class="ui container">
    <button class="ui right floated primary button"><i class="plus icon"></i> New entry</button>
    <h1>Why you hate me, button?</h1>
    <div class="ui grid">
        <div class="stretched row">
            <div class="twelve wide column">
                <div class="ui segment">Left column</div>
            </div>
            <div class="four wide column">
                <div class="ui segment">
                    <h3>Elliot Fu</h3>
                    <p>Friends of Veronika</p>
                    <div class="ui two buttons">
                        <div class="ui basic green button">Approve</div>
                        <div class="ui basic red button">Decline</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

这是预期的行为，您需要清除按钮使用的浮动

HTML WITH CSS 内联（示例）

  <div class="ui grid" style="clear:both;">
        <div class="stretched row">
            <div class="twelve wide column">
                <div class="ui segment">Left column</div>
            </div>
            <div class="four wide column">
                <div class="ui segment">
                     <h3>Elliot Fu</h3>

                    <p>Friends of Veronika</p>
                    <div class="ui two buttons">
                        <div class="ui basic green button">Approve</div>
                        <div class="ui basic red button">Decline</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

DEMO HERE

语义 UI - 影响网格边距的浮动按钮

Semantic UI - floated button affecting grid margin

html

css

semantic-ui