图像不与文本保持一致。

Question

我刚刚开始使用CSS来开发网页，我得到了一些关于悬停信息功能的代码，但是当我将它应用到我的图像和信息中时，图像不与文本保持一致，而是向下移动到几乎它自己的行。下面是代码：

在标题中：

span.dropt {background: #ffeedd;}

span.dropt:hover {
    text-decoration: none; 
    background: #ffffff; 
    z-index: 6; 
}

span.dropt:hover span {left: 2%; background: #ffffff;} 

span.dropt span {
    position: absolute; left: -9999px;
    margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
    border-style:solid; border-color:black; border-width:1px;
}

span.dropt:hover span {
    margin: 20px 0 0 170px; 
    background: #ffffff; 
    z-index:6;
}

在身体中：

<div style="width:450px; margin:0 auto;">
    <font face = "impact" size = "6">
        <br>My text
        <span class="dropt"><img src = "questionmark.png"/>
           <span> My info text</span>
        </span><br>
    </font>
</div>

Answer 1

JSFiddle

在您的css中：

span.dropt{
  display:inline-block;
}

此外，尽量不要做任何内联风格，例如：

<div style="width:450px;">

这就是css文件的用途。

另外，<font>标记在HTML5中已被废弃。您可以阅读更多关于它的这里。

在我的小提琴里，我稍微更新了你的css。

div{
    width:450px;
    margin:0 auto;
    font-family:"impact";
    font-size:28px;
}

Answer 2

可以将display: inline-block添加到span中：

span.dropt {
    background: #ffeedd;
    display: inline-block;
}

请注意，从HTML4开始，<font>标记就被废弃了，您应该使用<span>元素。

小提琴演示