0

我正在尝试为我们的内部应用程序解决 OK/CANCEL 按钮的放置问题。
我们希望 OK 和 Cancel 按钮的放置（和样式）一致。

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

但是，问题在于，当我用position: absolute;.
由于这个折叠的 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>

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

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

4

3 回答 3

1

position: absolute并不是真的为此目的。

您真正需要的是float:lefton .cancel 和float:righton .proceed

然而，一旦你这样做了，你仍然会遇到同样的问题，即 .button-wrapper 上的高度为 0。这就是clear:both进来的地方。

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

1）在 .proceed 和 .cancel: 之后添加一个新的 div：<div class="clear"></div>使用以下 css：

.clear {
  clear: both;
}

2) 您可以在 .button-wrapper 上使用 :after 伪选择器，仅使用 CSS 添加清除：

.button-wrapper:after {

  content: '.';
  display: block;
  clear:both;
  visibility:hidden;
  height:0;

}

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

于 2013-01-16T15:36:00.833 回答
0

尝试使用浮点数。您需要“清除”包装浮动的块，例如使用overflow:hidden. 您可以阅读很多关于浮动和清除的文章。

http://jsfiddle.net/89NUZ/

.button-wrapper{ 
    overflow:hidden;
}
.button-wrapper .proceed{
    float:left;
}
.button-wrapper .cancel{
    float:right;
}
于 2013-01-16T15:37:12.437 回答
0

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

可能是这样的：

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/

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

于 2013-01-16T15:37:27.540 回答