5

私は次のhtmlを持っています

<div class="btns">

<div id="green">    <span class="btn btn-block btn-large btn-success disabled green_btn">Green</span>

 <div class="num">(1)</div>
</div>
<div id="red">
    <form class="button_to" >
        <div>
            <input class="btn btn-block btn-large btn-danger red_btn"
            type="submit" value="Red">
        </div>
    </form>
    <div class="num">(0)</div>
</div>
</div>

とcss

.btns {
    position: relative;
}

.num {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

#green, #red {
    display: inline-block;
    width: 49%;
    position: relative;
}

.green_btn, .red_btn {
    margin-bottom: 4px;
}

緑色のスパンの下の (1) が赤いボタンの下の (0) のように動作しない理由がわかりません。削除するbottom:0;と、緑は修正されますが、赤が台無しになります。

これは、問題を説明するための jsfiddle ですhttp://jsfiddle.net/HajHV/

ここで何が欠けていますか？

4

5 に答える 5

4

これを試して

.btn
{
    background-color: rgb(7, 55, 99);
    color: white;
    border: none;
    cursor: pointer;
    padding: 2px 12px 3px 12px;
    text-decoration: none;

}

HTML

<span class="btn">Submit</span>

出力を削除した後の出力は ここに画像の説明を入力

于 2013-02-28T06:28:06.337 に答える
4

Twitter Bootstrap (使用している) は、<form>要素に下マージンを追加します。

これを試して、2 つのボタンを正規化します。

.button_to { margin-bottom:0; } /* Target the <form> in the red button */

デモ: http://jsfiddle.net/HajHV/3/

于 2013-02-28T06:29:31.860 に答える
2

フォームのマージンが原因です。

margin: 0 0 20px;
于 2013-02-28T06:30:10.173 に答える
1 
 <div class="num" style="height:5px;">(1)</div>

あなたの中でそれを使用してください<div>

于 2013-02-28T06:27:01.200 に答える
0

基本的にこれはフォームの余白の問題です。私はあなたのCSSを削除し、単にこれを追加しました:

form { margin: 0; }
#green, #red {
    width: 48%;
    float:left;
    position: relative;
}
.num { margin: 0 auto; width: 10px; }

修理済み

于 2013-02-28T06:34:49.640 に答える