如何使此文本和图像不重叠答案

【问题标题】：How can I make this text and image not overlap如何使此文本和图像不重叠
【发布时间】：2021-07-31 19:40:28
【问题描述】：

我知道这看起来很简单，但我已经尝试了一个小时来找出解决方案。我有一个“a”元素，里面有文本和图像。问题是图片低于文本，我希望它们对齐。

a {
        text-decoration: none;
        color: #fff;
    }
    
    a:hover {
        color: #ff5c33;
        text-decoration: none;
        cursor: pointer;
    }
    
    #nav-user-logo{
        max-height: 16px;
    }

     <!-- Header right part --> 
                <div class="dropdown">
                    <a>
                        User123
                        <img src="Images/Icons/user.svg" id="nav-user-logo" alt='User123'>
                    </a>
                    <div class="dropdown-content user-dropdown-content" >
                        <a>AW Admin</a>
                        <a>Account Settings</a>
                        <a>Change Password</a>
                        <a>Logout</a>
                    </div>
                </div>

【问题讨论】：

标签： html css web

【解决方案1】：

我自己没有这个问题，但你可以做

#nav-user-logo {
  max-height: 1em;
  display: inline;
}

保证它与文本内联。

【讨论】：

感谢您的回复，这没有用，原来它更简单。我发布了一个带有答案的评论。

【解决方案2】：

由于缺陷，任何带有您的css 的浏览器都会并排显示图像，我认为您想要：

您的代码示例：

a {
    text-decoration: none;
   
}

a:hover {
    color: #ff5c33;
    text-decoration: none;
    cursor: pointer;
}

#nav-user-logo{
    max-height: 16px;
}

 <div class="dropdown">
   <a>
     User123
     <img src="https://www.ajvs.com/redirect/5/Agilent_IMG300_UHV_R0343301_1,8926cf9ec9ce009a52f3ea8866b07f5f" id="nav-user-logo" alt='User123'>
   </a>
   <div class="dropdown-content user-dropdown-content">
     <a>AW Admin</a>
     <a>Account Settings</a>
     <a>Change Password</a>
     <a>Logout</a>
   </div>
 </div>

可能，您有某种“重置”css sheet 将您的所有图像转换为display:block 这在许多 wordpress 主题中很常见。您可能需要覆盖这些 css 添加 img {display:inline-block} 或类似规则。调用 id 图像或类以不破坏您的整个主题。

【讨论】：

我没有使用 wordpress。我正在从头开始制作我的网站来学习一些 HTML 和 CSS。原来我遇到的问题非常简单，我已经发布了带有答案的评论。谢谢

【解决方案3】：

事实证明问题非常简单。此代码位于右侧的标题中，“a”元素太小，无法并排显示代码和图像。我用以下方法修复了它：

<!-- Header right part --> 
            <div class="dropdown">
                <a style="display:inline-block; width: 150px;">
                    User123
                    <img src="Images/Icons/user.svg" id="nav-user-logo" alt='User123'>
                </a>
                <div class="dropdown-content user-dropdown-content" >
                    <a>AW Admin</a>
                    <a>Account Settings</a>
                    <a>Change Password</a>
                    <a>Logout</a>
                </div>
            </div>

【讨论】：