Geek asks and answers

Creating a range behaves like a button

I have the following 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

.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 understand why (1) under the green span does not behave like (0) under the red button. If I delete bottom:0;, it captures green, but the mess is red.

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

What am I missing here?

+5
source share
5 answers

This is due to the form field.

margin: 0 0 20px;
+2
source

Twitter Bootstrap (which you use) adds a bottom margin to the element <form>.

Try this to normalize two buttons:

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

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

+4
source 

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

enter image description here

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

<div>

+1

This is mainly a form field problem. I removed your CSS and simply added this:

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

Fixed

0
source

More articles:


All Articles