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文件的用途。

另外请注意，HTML5中已弃用<font>标记。您可以阅读更多相关信息here。

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

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

Answer 2

您可以向{span>添加display: inline-block：

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

请注意，自{4}以来已弃用<font>标记，您应该使用<span>元素。

Fiddle Demo

图像不会与文本保持内联

2 个答案: