0

内部アプリの OK/CANCEL ボタンの配置を解決しようとしています。
OK ボタンとキャンセル ボタンを一貫して配置 (およびスタイル) したいと考えています。

私が考えたのは、単純にボタンをボタン ラッパーにドロップし、そのラッパーとの関係で配置することでした。

ただし、問題は、ボタンを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>

ご覧のとおり、「OK」タイプのボタンを片側に配置し、「キャンセル」タイプのボタンを反対側に配置したいだけです。これを行う最善の方法はありますか
？ もしそうなら、私のボタンが他のオブジェクトにぶら下がらないようにするエレガントな方法は何でしょうか?position:absolute;

（注：ラッパーに固定の高さを割り当てることだけを考えましたが、それは完全に柔軟性がないようです。ソリューションでは、任意のサイズのボタンを許可する必要があります。）

4

3 に答える 3

1

position: absoluteこの目的のためのものではありません。

ここで本当に必要なのはfloat:lefton .cancel とfloat:righton .proceed だけです

ただし、これを行うと、.button-wrapper で高さが 0 になるという同じ問題が引き続き発生します。ここでclear:both出番です。

clear:both2 つの浮動要素の後に が必要になります。次の 2 つの方法のいずれかで追加できます。

1) .proceed と .cancel: の後<div class="clear"></div>に次の css を使用して新しい div を追加します。

.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 プロパティを使用する代わりに、float を使用してそれらを配置してみてください。

このようなものかもしれません：

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 に答える