Question

我正在尝试解决内部应用的OK / CANCEL按钮位置。
我们希望OK和Cancel按钮一致地放置（和样式化）。

我的想法只是将按钮放在按钮包装器中，然后将它们放在与包装器相关的位置。

问题在于，当我使用position: absolute;拨打按钮时，包装器如何折叠到0高度。
由于这个折叠的div，我的按钮最终晃来晃去。

示例：

/*** css ***/
section.blah{
    border: 1px solid #DDD;
    margin: 2em;
    padding: 1.5em 1em;
}
.button-wrapper{ 
    position:relative;
}
.button-wrapper .proceed{
    position:absolute;
    right:0;
}
.button-wrapper .cancel{
    position:absolute;
    left:0;
}

/*** html ***/
<section class="blah">
    <div class="button-wrapper">
        <button class="btn proceed">OK</button>
        <button class="btn cancel">Cancel</button>
    </div>
</section>

正如您所看到的，我们只希望“OK”类型按钮位于一侧，“取消”类型按钮位于另一侧。
position:absolute;是最好的方法吗？
如果是这样，那么确保我的按钮不会悬挂在其他物体上的优雅方法是什么？

（注意：我想只是为包装器分配一个固定的高度，但这似乎完全太灵活了。解决方案需要允许任何大小的按钮。）

Answer 1

position: absolute并非真正用于此目的。

这里你真正需要的是{。1}在.cancel和float:left on .proceed

但是，一旦你这样做，你仍然会遇到与.button-wrapper相同的高度问题。这是float:right的用武之地。

在两个浮动元素之后，您需要clear:both。您可以通过以下两种方式之一添加它：

1）在.proceed和.cancel之后添加一个新的div：clear:both使用以下css：

<div class="clear"></div>

2）你可以在.button-wrapper上使用：after伪选择器，只用CSS添加clear：

.clear {
  clear: both;
}

编辑：这是一个JSFiddle，说明了选项2：http://jsfiddle.net/P5gj4/

Answer 2

尝试使用花车。您需要“清除”包裹浮动的块，例如使用overflow:hidden。有很多关于花车和清理的文章，你可以阅读。

http://jsfiddle.net/89NUZ/

.button-wrapper{ 
    overflow:hidden;
}
.button-wrapper .proceed{
    float:left;
}
.button-wrapper .cancel{
    float:right;
}

Answer 3

尝试使用浮点数而不是使用位置属性来定位它们。

这样的事情可能是：

section.blah {
    border: 1px solid #DDD;
    margin: 2em;
    padding: 1.5em 1em;
}
.button-wrapper{ 
   overflow: hidden;
}
.button-wrapper .proceed{
   float: right;
}
.button-wrapper .cancel{
   float: left;
}

http://jsfiddle.net/4CpaW/

我将溢出设置为隐藏在父级上以清除浮动。

CSS：Wrapper div在定位子项时崩溃。有没有更好的办法？

3 个答案: