html - 图像不与文本保持内联

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 中已被弃用。您可以阅读更多相关信息 here .

在我的 fiddle 中，我已经更新了你的 css略。

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