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

【问题标题】：Semantic UI - floated button affecting grid margin语义 UI - 影响网格边距的浮动按钮
【发布时间】：2015-11-04 01:52:29
【问题描述】：

请看：http://jsfiddle.net/3tL9msap/2

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

现在看到没有按钮 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>

【问题讨论】：

所以第一个看起来并不“好”，但这意味着什么？我也可以抱怨你的“好”例子。 “奇怪的行为”是什么意思？还有什么错误？
这是意料之中的......你必须清除浮动

标签： html css semantic-ui

【解决方案1】：

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

带有 CSS 内联的 HTML（示例）

  <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

【讨论】：