CSS Shift Downward

Question

Может кто-нибудь сказать мне, что происходит с этим виджетом: http://davidbeckblog.com/notify/? Соответствующий CSS в основном находится внизу style.css .

По сути, виджет имеет 3 раздела. Слева - кнопка, в центре - текстовое поле, а справа - место для индикатора прогресса. Когда я добавляю текстовое поле и индикатор прогресса, все опускается вниз.

Answer 1

Это, кажется, это исправить:

.notify-me input, .notify-me span {
    vertical-align: top;
}

.notify-me input {
    margin-top: 0.4ex;
}

(Старайтесь избегать полей / отступов с фиксированными пикселями, так как они будут быстрее разрушаться, когда пользователь изменяет размеры шрифта.)

Answer 2

Это встроенные элементы, и, по-моему, вертикальное выравнивание равно baseline по умолчанию.Установите выравнивание по вертикали на всех 3 участках равным top, и тогда, похоже, вам нужно указать margin-top:-3px для span.status и, возможно, применить верхнее поле в 1px для диапазона уведомлений.

В качестве альтернативы вы могли быплавали все 3 с очищающим элементом.