如何使Logout文本与logout.svg图标在一行对齐并实现正常悬停

你当前的问题主要是图标和文本垂直对齐失效，以及悬停范围仅覆盖文本区域，调整以下几点就能解决：

修改后的CSS代码 #

.dropdown {
    position: absolute;
    min-width: 150px;
    background-color: yellow;
}
#row {
    display: flex;
    align-items: center; /* 让图标和文本垂直居中对齐 */
    padding: 14px; /* 内边距加到整行，保证悬停范围覆盖整个区域 */
    border-bottom: 1px solid #caced1;
}
#row:hover {
    background-color: white; /* 悬停效果应用到整行 */
}
#logout {
    height: 25px;
    margin-right: 10px; /* 给图标和文本之间加间距 */
}
#element {
    /* 移除display:block，span默认是行内元素，避免独占一行 */
}

修改后的HTML代码 #

<div class="dropdown">
    <div id="row">
        <img id="logout" src="https://www.svgrepo.com/show/135250/logout.svg">
        <span id="element">Logout</span>
    </div>
</div>

关键修改说明 #

• 给#row添加align-items: center：借助flex布局的垂直居中特性，让图标和文本在同一行的垂直方向对齐
• 把内边距padding和边框border-bottom从#element移到#row：确保整个行都有内边距，悬停时整个区域都会触发背景色变化
• 给#logout加margin-right：让图标和文本之间保留合适间距，视觉更协调
• 将:hover效果绑定到#row：鼠标悬停整个行都会变色，而不是只有文本部分

内容的提问来源于stack exchange，提问作者Sabrina