0

このコードは機能しますが、コンテナーの右上に dom 要素を配置するのが最善の方法であるかどうかを知りたいです。

前提条件は次のとおりです
。1) DOM は変更できません。2)元のコード
でコメント付きの CSS コードは変更できません。

デモ: http://jsfiddle.net/jBme9/1/

<div class="control-group">
    <div class="controls">
        <div class="prize-item">
            <div class="control-group ">
                <label class="control-label">Name</label>
                <div class="controls">
                    <input type="text" class="form-prize-item-name" value="prize2">
                </div>
            </div>
        </div>
        <button type="button" class="btn" data-toggle="collapse" data-target="">
            Edit
        </button>
    </div> 
</div>

.controls button{
    float: right;
    position:absolute;
    top:0px;
    right: 0px;
}

/* original code */
.control-group {
    background-color: #D9EDF7;
    padding: 13px;
    margin-bottom: 20px;
}
/* original code */
input {
    box-sizing: border-box;
    height: auto;
    padding: 8px 4px;
    width: 100%;
}
​
4

4 に答える 4

1

絶対位置の要素（ボタン）には、絶対位置のコンテキストが必要です。これは、その親要素をposition：relativeで宣言することで実行できます。これを行わないと、ボタンは最も外側の親要素、つまりhtmlタグに対して絶対的に相対位置に配置されます。

また、CSSには冗長なプロパティfloatがあります。絶対位置決めの場合、フロートは必要ありません。

必要なのはこれだけです。

position: absolute;
top: 0;
right: 0;
于 2012-10-04T08:09:18.513 に答える
1

良さそう。でもラインはいらないfloat:right。position:absoluteしましょう。

于 2012-10-04T08:05:08.417 に答える
1

あなたは単にあなたがしたことをすることができますが、あなたのウェブページのどこかにそれを置きたい場合はdiv、position: relative;

まず第一に、あなたが必要としないもの：

1)float: right; /* In .controls button */

2) というクラスがあります。したがって、 .controls ボタンbtnは必要ありません。そうしないと、スタイルがすべてのボタンに適用されます。.btn.controls

3）ボタンは属性を必要としませんtype=button...（指定する必要があるもの以外をリセット/送信するために使用していない場合を除きます）

私のフィドル

于 2012-10-04T08:05:49.057 に答える
0

次のような要素クラスを作成できます

input[type="button"]
{
float:right;
}
input[type="text"]
{
float:right;
}
or

input[type="text"], input[type="button"]
{
float:right;
}
于 2012-10-04T09:27:55.297 に答える