使跨度表现得像一个按钮

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;，它会修复绿色但会混淆红色。

这是一个说明问题http://jsfiddle.net/HajHV/

的jsfiddle

我在这里缺少什么？

Answer 1

Twitter Bootstrap（您正在使用）为<form>元素添加了一些底部边距。

尝试此操作来规范化两个按钮：

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

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

Answer 2

试试这个

.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>

删除输出后输出

Answer 3

这是因为形式的余量。

margin: 0 0 20px;

Answer 4

 <div class="num" style="height:5px;">(1)</div>

在<div>

中使用它

Answer 5

基本上这是形式边缘的问题。我删除了你的CSS并简单地添加了这个：

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

Fixed