Как выровнять div-блоки в css?

Question

Пожалуйста, посмотрите на эту ссылку:

http://jsfiddle.net/eJTGr/

Если вы уменьшите область «Javascript», чтобы область «Результат» была увеличена, вы увидите, что это два белых прямоугольника с серой рамкой рядом друг с другом с черным квадратом в конце, который немного выходит за рамки. 1006 *

Как это соотносится с двумя белыми полями?

Спасибо!

Джеймс

Answer 1

Вы можете установить положение .button1 относительно и добавить атрибут top. Это позволит вам переместить кнопку на пару пикселей вниз - 6 пикселей в вашем случае.

Ваш класс .button1 будет

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

Answer 2

просто дайте кнопку

position: absolute; 

но это не лучший способ сделать что-то вроде

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

Answer 3

Попробуйте удалить display-inline из тегов.Затем добавьте float:left к каждому.Удалить vertical-align: 9px; с входов.Я также удалил margin-top:4px из button1 Примечание: центральный тег устарел, поэтому не используйте его для своих сайтов.

Ознакомьтесь с демонстрацией здесь

Answer 4

Добавьте vertical-align:bottom к классу .button1.

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

Причина: Ваш divs определяется как inline-block. Считайте их как строки таблицы. Иногда они не имеют одинакового вертикального выравнивания.

Примечание:
.search-field1 получил verticle-align: center;, в то время как .search-field2 получил horizontal-align: center;, который, я думаю, не существует.

Answer 5

<input type="submit" />

вместо

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

Чистый код: 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; 
}