Блог

Главная - Вопросы по программированию - Как мне избавиться от этого фантомного элемента в моей кнопке

Как мне избавиться от этого фантомного элемента в моей кнопке

#html #css #button

Вопрос:

Призрачный пробел

 <button onClick={onDropdownClick} className="menu-trigger">
    <img
        className="google-profile-photo"
        src={currentUser.photoURL}
        alt="User Avatar"
    />
    <span>
        <ArrowDown />
    </span>
</button>

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

 .menu-trigger {
    display: flex;
    width:auto;
    min-height: 5rem;
    position: relative;
    background: white;
    border-radius: 0.3rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    box-shadow: 8px 16px 5rem #eeeeee;
    vertical-align: middle;
    transition: box-shadow 0.4s ease;
    margin-top: 1rem;
    border: none;
}

.google-profile-photo {
    border-radius: 50%;
    margin: 2%;
    width: 50%;
    height: 100%;
}

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

1. Разве это не просто твое flex промежуточное пространство?

2. Когда я удаляю это, он добавляет пробел в конец кнопки

Ответ №1:

Вам нужно будет указать элемент изображения flex: 1 , чтобы он мог заполнить это пространство. Вот несколько уменьшенный пример…

 .menu-trigger {
    display: flex;
    min-height: 3rem;
    position: relative;
    background: white;
    cursor: pointer;
    align-items: center;
    padding: 4px 6px;
    border: 1px solid black;
    width: auto;
}

.google-profile-photo {
    margin: 2%;
    border-radius: 50%;
    flex: 1;
    height: 100%;
} 
 <button class="menu-trigger">
    <img
        class="google-profile-photo"
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAADFBMVEXU3ej///8AAAATExOMrozEAAAAdElEQVR4XpXPsQ2DMBRF0StX4D1c4IYRmAJkeQKPwRL0NJGQp6OK0hG9L5wqRXKbf6RXfX4qrvhDCDtDXoVCWBAS4SlML8KlaTyJDa4K/9QZHPhqQT r5Rt8g/tgu8FDyMAgJMBrK9zbLsRttneg5gMLu603mI0q2s7nekMAAAAASUVORK5CYII="
        alt="User Avatar"
    />
    <span>
        amp;darr;
    </span>
</button>

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

1. ДА, большое вам спасибо, это полностью решило проблему. Я никогда не знал об этом отеле.

2. Вы захотите прочитать до конца css-tricks.com/snippets/css/a-guide-to-flexbox 🙂

3. Спасибо. Это было очень полезно. Никогда не знал, что flex-это сокращенное название для гибкого роста, гибкого сокращения и гибкой основы вместе взятых.

Ответ №2:

используйте это:

 justify-content: center;

и это для вашего второго вопроса :

 background-size: cover

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

1. Спасибо, это вроде как исправлено. Теперь пробелы разделены между обеими сторонами кнопки.

2. @CharlieGroves ответ на второй вопрос содержится во второй части…….

Метки: