Question

我知道这看起来很简单，但我一直试图找出一个小时的解决方案。我有一个带有文本和图像的“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>

Answer 1

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

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

保证它与文本内嵌。

Answer 2

由于缺陷，任何带有 if(typeGuard(myObject)) { if(isValid(myObject)) { // do something with valid object } else { // do something with invalid object } } // do nothing without an object to act upon 的浏览器都会并排显示图像，我认为：

代码示例：

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 这在许多 wordpress 主题中很常见。您可能需要通过添加 display:block 或类似规则来覆盖这些 css。调用 id 图像或类以免破坏整个主题。

Answer 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>

我怎样才能让这个文字和图片不重叠

3 个答案: