Блог

Главная - Вопросы по программированию - Создание кликабельной области кнопки, соответствующей кнопке, и перемещение стрелки вверх к центру внутри

Создание кликабельной области кнопки, соответствующей кнопке, и перемещение стрелки вверх к центру внутри

#css

Вопрос:

Ссылка на песочницу: https://codesandbox.io/s/vigilant-currying-h7c3r?file=/styles.css

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

Что касается области кликабельности, я не могу найти ничего о ее сокращении.

Для центрирования текста я попробовал это, а также несколько других способов отображения: таблица-ячейка и выравнивание текста: по центру. https://www.codecademy.com/forum_questions/50c29d469bc1e14c8b001f64

Комментарии:

1. Это то, что вы пытаетесь сделать? codesandbox.io/s/recursing-mclean-9ph0g?file=/styles.css

Ответ №1:

Привет @секрет Это происходит из-за фиксированной высоты кнопки,

Я внес несколько изменений в ваш CSS, вы можете попробовать с этим, это поможет вам

 .arrow {
    border-radius: 2vh;
    font-size: 2em;
    font-weight: bold;
    color: darkblue;
    width: 5vh;
    height: 2vh;
    line-height: 0; /* 1. Change Line Height otherwise you want to remove height */
    padding: 10px 0; /* 2. TOP - BOTTOM spacing */
    cursor: pointer; /* 3. Show cursor this is clickeble */
}

Я надеюсь, Что Это Вам Поможет 🙂 Спасибо

Комментарии:

1. Спасибо, как мне сделать кнопки в вертикальной середине коробки, в которой они находятся? И как мне сделать кликабельную область только на кнопках?

2. Как мне увеличить размер высоты в его коробке? Я не могу сделать это, не увеличив размер коробки, в которой он находится.

3. Вы можете сделать это с увеличением размера отступа.

4. Это, кажется, увеличивает размер большой коробки, в которой находится кнопка, но не саму кнопку.

Ответ №2:

Эта проблема возникает из-за того, что ваша кнопка имеет фиксированную высоту, но размер шрифта на некоторых экранах больше. Чтобы исправить это,вам следует изменить размер и высоту шрифта,чтобы использовать одни и те же показатели (например,px, em, rem, vh и т. Д.), И убедитесь, что размер шрифта всегда будет меньше вашего роста.

О чем следует помнить при корректировке этих двух:

  1. Обивка также потребляет часть вашего роста
  2. Высота строки не должна быть меньше размера шрифта.
Метки: , ,