时间戳

首页 > 解决方案 > 如何摆脱按钮中的这个幻​​像元素

html - 如何摆脱按钮中的这个幻​​像元素

问题描述

幻影留白

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

我希望 img 标签和 span 彼此相邻，中间没有空格。我无法摆脱中间的这个空白。有谁知道怎么做？

.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%;
}

标签： htmlcssbutton

解决方案

用这个：

justify-content: center;

这是你的第二个问题：

background-size: cover

推荐阅读