Как исправить сползание блока ниже родительского элемента?

Question

[Антон Manevant]

Приветствую.

Верстаю не так давно, столкнулся с непонятным поведением элемента.

Второй элемент (кнопка) сползает ниже родителя, вылезая за его границы, хотя ожидалось поведение как у первого чекбокса, а именно - выравнивание посередине.

Дано-
HTML

<div class="search">
	<input type="checkbox">
	<input type="button" value="Button Text">
</div>

CSS

.search {
	height: 60px;
	}

input[type="checkbox"] {
	height: 100%;
	line-height: 60px;
	}

input[type="button"] {
	height: 30px;
	}

Выглядит это так -

Вопросы:
1. Почему это происходит?

2. Как это исправить?

Заранее большое спасибо!

Answer 1

[Юрий Лобанов]

Чего-то Вы намудрили. Вам вот это надо?
jsfiddle.net/iiil/dW7d9

input - элемент строчный. Они и так будут в линию. А line-height надо прописать для родителя, чтобы элементы были по центру Вашего блока search.

Вот вариант с высотой кнопки в 30 px как у Вас. jsfiddle.net/iiil/dW7d9/1

Comments

[Антон Manevant]

@iiil Действительно намудрил. Понял в чем ошибся. Огромное спасибо!