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

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

试试这个来标准化两个按钮：

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