html - 使跨度表现得像一个按钮

Question

我有以下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/

我在这里错过了什么？

Answer 1

Twitter Bootstrap(您正在使用的)为 <form> 添加了一些底边距元素。

试试这个来规范化两个按钮:

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

演示:http://jsfiddle.net/HajHV/3/