Отображение встроенного блока влияет на высоту строки при наведении курсора

#html #css

#HTML #css

Вопрос:

Я создал несколько «кнопок» из трех разделов и установил наведение курсора на каждый div, чтобы текст уменьшался на 5 пикселей, когда пользователь наводит курсор на div.

Я использую display:inline-block то, что не хочу использовать float:left

Единственная проблема заключается в том, что когда я использую display:inline-block на divs, вместо этого он понижает другие divs.

Вот как это должно работать (с использованием float:left )

РАБОТАЕТ

И это то, что происходит, когда я использовал display:inline-block

НЕ РАБОТАЕТ

Есть ли исправление для этого или мне придется использовать другое решение?

1. установите явный vertical-align:middle (или верхний, нижний, …) для всех элементов встроенного блока jsfiddle.net/viphalongpro/y47P7/1

2. inline-block элементы vertical-align:baseline; по умолчанию.

3. @KingKing это решение работает, но когда я пытаюсь добавить кнопки в оставшуюся часть моего кода, оно снова перестает работать :/

4. @SaturnsEye не уверен, что вы имеете в виду, так какая новая обновленная скрипка показывает, что она не работает?

Ответ №1:

Устранена проблема!

Хотя ответ KingKing был правильным, использование .wkd > * {vertical-align:middle;} , похоже, не очень хорошо работало с остальной частью моего кода, поэтому мне пришлось немного изменить его, чтобы он работал так:

 .won, .keep, .discard {
    vertical-align:middle;
}

Тем не менее, ответ KingKing помог мне разобраться в этом, так что спасибо 🙂

1. Я думаю, вам нужно прочитать комментарий @kingking «установить явное выравнивание по вертикали: среднее (или верхнее, нижнее, …) для всех элементов встроенного блока», он сказал это для всех элементов встроенного блока, хотя он не включает это в fiddle.

2. похоже, ваш фактический код отличается, в вашем демонстрационном коде все .won, .keep, .discard они являются прямыми дочерними элементами .wkd , но в вашем реальном коде они могут и не быть. Так что это не сработает.

3. @KingKing они тоже были прямыми дочерними элементами в моем собственном коде, но по какой-то причине это просто не вступило в силу