0

私は同じ行に入れようとしていますが$('.prize-item input')、$('.prize-edit')

これが DOM 構造 (1) と CSS コード (2) です。

私は訴えようとしましたdisplay:inline-blockが、成功しませんでした。

前提条件は次のとおりです
。1) 絶対位置を使用してはなりません。
2) 画面のサイズを変更しても、ボタンと入力ボックスの間の距離は変わらないはずです。
3) CSS で要求した結果が得られない場合にのみ、DOM 構造を変更する必要があります。

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

(1)

<div class="control-group">
    <div class="controls">
        <div class="prize-edit">
            <button type="button" class="btn" data-toggle="collapse" data-target="">Edit Same line</button>
        </div>
        <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="prize same line">
                </div>
            </div>
        </div>

    </div> 
</div>

</h2>

(2)

.prize-edit {
    float: right;
    display: inline-block;
}

.prize-item input {
    float: left;
    display: inline-block;
}

4

2 に答える 2

2

相対位置を使用できます。実際のページに合わせてこれらの値を調整してください。

デモ

コード：

.controls button {
    float: right;
    position:relative;
    top:38px;
    right:17px;
}

ピクセルを使用しているため、ピクセルを使用しましたが、これはems でも実行できます。

buttonを の外側にプッシュするinputには、入力のラッパーに別のクラスを追加します。「controlsWrapper」としましょう。

あなたがhtmlに持っているように：

<div class="controls controlsWrapper"><input...other stuff...></div>

そしてCSSで

.controls button {
    float: right;
    position:relative;
    top:38px;
}
.controlsWrapper {
    box-sizing: border-box;
    width:100%;
    padding-right:40px; /* width of the button + some space */
}

デモを確認する

于 2012-10-04T09:44:12.020 に答える
0

このDOM構造では無理だと思います。次のようなものが必要です。

<div class="aWrapper">
  <div class="control-group">
    <label class="control-label">Name</label>
    <div class="controls">
      <div class="prize-edit">
        <button type="button" class="btn" data-toggle="collapse" data-target="">Edit Same line</button>
      </div>
      <div class="prize-input"><!-- I renamed the class! -->
                <input type="text" class="form-prize-item-name" value="prize same line">
      </div>
    </div>
  </div>
</div>

追加：

.label { diplay: block; }
.prize-edit { float: right; width: 20%; // adjust with paddings etc. }
.prize-input { float: left; width: 80% // adjust ... }
于 2012-10-04T10:23:41.127 に答える