如何在与图像相同的行中显示<p> </p>

Question

DEMO LINK

我希望<p>文字与图像一致显示，以便所有内容都能正确显示居中和内嵌。

此外，当屏幕较短且文字需要2 +行（响应）时，我希望保持相同，以便文本不会在图像下面显示。

我怎样才能做到这一点？

Answer 1

将<p>替换为<span>。然后做：

.tip span {
    margin-left:10px; 
} 
img {
    vertical-align: middle; 
}

请注意，您的跨度不需要display: inline-block。

Answer 2

DEMO REVISED

改变

.tip p {
    display:inline;
    margin-left:10px;
}

并补充说：

.tip img {
    float:left;
}

inline-block到inline，以便它在父div中排成一行。 float:left;将图片保留在父div的左侧。

Answer 3

试试这个......下面的代码可以使用！

<img src="" alt="" style="width:32px;height:32px;float:left;">
<p style="margin:0px;height:32px;max-idth:100%;float:left;overflow:auto;">TEST</p>

将32px更改为适合您的一个尺寸 样式浮动：左;做你想要的东西