Html 使跨度表现得像一个按钮

making a span behave like a button

提问by Nick Ginanto

I have the following html

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

and css

和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;
}

I can't figure out why the (1) under green span isn't behaving like (0) under the red button. If I remove bottom:0;it fixes the green but messes up red.

我不明白为什么绿色跨度下的 (1) 不像红色按钮下的 (0)。如果我删除bottom:0;它会修复绿色但会弄乱红色。

Here is a jsfiddle to illustrate the problem http://jsfiddle.net/HajHV/

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

What am I missing here?

我在这里缺少什么？

采纳答案by pdoherty926

It's because of the form's margin.

这是因为表单的边距。

margin: 0 0 20px;

回答by Pawan Lakhara

try this

尝试这个

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

}

HTML

HTML

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

after removing the output output is

删除输出后输出是

回答by Wesley Murch

Twitter Bootstrap (which you are using) adds some bottom margin to the the <form>element.

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

Try this to normalize the two buttons:

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

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

Demo: http://jsfiddle.net/HajHV/3/

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

回答by Naveen Kumar Alonekar

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

Use it in your <div>

在你的 <div>

回答by Starx

Basically this is the problem of form's margin. I removed your CSS and simply added this:

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

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

Fixed

固定的