Semantic UI - 浮动按钮影响网格间距

Question

请查看：http://jsfiddle.net/3tL9msap/2 按钮的宽度会将网格的右边距向内推。现在看看没有按钮的情况： http://jsfiddle.net/3tL9msap/3 ，网格的两侧边距相等，如预期。

即使将

和放在其自己的

中，此按钮仍会产生这种效果。

如果您希望出现这种行为，如何在不影响网格边距的情况下将按钮右对齐？

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>

- Matt Jenkins

---

那么第一个看起来不是很“好”，但这意味着什么？我也可以抱怨你的“好”的例子。你所说的“奇怪行为”是指什么？还有一个bug在哪里？ - Rob

这是正常的编程操作...你必须清除浮点数。 - Luís P. A.

Answer 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

- Luís P. A.