Question

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

现在看不到按钮http://jsfiddle.net/3tL9msap/3，两侧的网格边距相同，正如预期的那样。

即使<button>和<div class="ui container">放在他们自己的<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：

{{1}}

Answer 1

这是预期的行为，您需要清除按钮

使用的浮动

HTML WITH CSS INLINE（示例）

  <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 - 浮动按钮影响网格边距

1 个答案: