How to level div boxes in css?

Please look at this link:

http://jsfiddle.net/eJTGr/

If you minimize the 'Javascript' area so the 'Result' area is enlarged you will see that it开发者_如何学Go is two white boxes with a grey border next to eachother with a black box at the end that is slightly out of line.

How is this put in line with the two white boxes?

Thanks!

James

---

You can set the position of .button1 to relative and add a top attribute. Doing this will allow you to move the button down a couple pixels — 6px in your case.

Your .button1 class would be

.button1 {
    height: 35px;
    width: 60px;
    background: #151515;
    border:1px solid;
    border-color: #BDBDBD;
    display: inline-block;
    horizontal-align: center;
    position:relative;
    top:6px;
}

---

Add vertical-align:bottom to the .button1 class.

.button1 {
 height: 35px;
    width: 60px;
    background: #151515;
    border:1px solid;
    border-color: #BDBDBD;
    display: inline-block;
    horizontal-align: center;
    vertical-align:bottom;
}

Reason : Your divs are defined as inline-block. Consider them like table rows. Sometime they do not take the same vertical alignment.

Note :
.search-field1 got a verticle-align: center; while .search-field2 got a horizontal-align: center;, which I think, does not exist.

---

just give the Button

position: absolute; 

but this isn't the best way i would do something like

.form-container {
    position: relative;
    float: none;
    }
.form-element {
    float: left;
    }

</style>

<div class="form-container">
    <form action="#" method="post" enctype="text/plain"

    <div class="form-element"><input type="text" name="" /></div>
    <div class="form-element"><input type="text" name="" /></div>
    <div class="form-element"><input type="submit" name="" /></div>

    </form>

</div>

---

Try removing the display-inline from the tags. Then add float:left to each. Remove vertical-align: 9px; from the inputs. I also removed the margin-top:4px from the button1 Note: the center tag has been deprecated so don't use for your websites.

Check out demo here

---

<input type="submit" />

instead of

<div class="button1" style="margin-top:4px;"></div>

Clean code : http://jsfiddle.net/eJTGr/30/

HTML

<div id="wrapper">
    <div id="search-field1">
        <input type="text" name="search1" />
    </div>

    <div id="search-field2">
        <input type="text" name="search2" />
    </div>

    <input type="submit" />
</div>

CSS

#wrapper { text-align: center; }

#search-field1 {
    height: 35px;
    width: 320px;
    border: 1px solid #BDBDBD;
    display: inline-block;
}

#search-field2 {
    height: 35px;
    width: 320px;
    border: 1px solid #BDBDBD;
    display: inline-block;
}

input[type="submit"] {
    height: 36px;
    width: 60px;
    border: 1px solid #BDBDBD;
    display: inline-block;
}

input[type="text"] {
    height: 35px;
    width: 320px; 
    border:0px; 
}