如何擺脫我的按鈕中的這個幻影元素？ -有解無憂

幻影的空白

< button onClick={onDropdownClick} className="menu-trigger">
    <img
        className="google-profile-photo"。
        src={currentUser.photoURL}
        alt="用戶頭像" 
    />
    <span> 
        <ArrowDown />>
    </span>
</button>

我希望img標簽和span相鄰，中間沒有空格。我無法擺脫中間的這個空白。有誰知道怎么做嗎？

.menu-trigger {
    display: flex;
    width:auto;
    min-height: 5rem;
    position: relative;
    背景：白色。
    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;
    過渡：箱形陰影0.4s緩解。
    margin-top: 1rem;
    邊界：無。
}

.google-profile-photo {
    border-radius: 50%;
    margin: 2%;
    寬度：50%。
    高度：100%。
}

uj5u.com熱心網友回復：

使用這個：

justify-content: center;

而這是你的第二個問題：

background-size: cover

uj5u.com熱心網友回復：

你需要給影像元素flex: 1，以便它能填滿這個空間。這里有一個最小化的例子。

。

span class="hljs-selector-class">.menu-trigger {
    display: flex;
    min-height: 3rem;
    position: relative;
    background: white;
    cursor: 指標。
    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"> /span>
    <img
        class="google-profile-photo"。
        src="資料。 image/png; base64, iVBORw0KGgoAAAANSUhEUgAAACAAAgAgMAAAAOFJJnAAAADFBMVEXU3ej//8AAAATExOMrozEAAAAdElEQVR4XpXPsQ2DMBRF0StX4D1c4IYRmAJkeQKPwRL0NJGQp6OK0hG9L5wqRXKbf6RXfX4qrvhDCDtDXoVCWBAS4SlML8KlaTyJDa4K/9QZHPhqQT r5Rt8g/tgu8FDyMAgJMBrK9zbLsRttneg5gMLu603mI0q2s7nekMAAAAASUVORK5CYⅡ="/span>
        alt="用戶頭像" 
    />
    <span> 
        &darr;/span>
    </span> 
</button>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/320729.html

標籤：

上一篇：當我們懸停在不同的元素上時，將一個圖示改為另一個圖示

下一篇：如何獲得kivy中按下的按鈕的ID？