Question

我有以下HTML标记：

<p><span>Hello</span>&nbsp;<div class="show" /></p>

现在div将background-image属性设置为某个图片：

.show {
    background-image: url(http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png);
    background-size: contain;
    width: 40px;
    height: 40px;
    display: inline-block;
}

我似乎无法将div（或更确切地说，图像）与span放在同一行，因为它们周围都有p。在保持p？

的同时，这是否可行？

Here is a JSFiddle展示问题

Answer 1

您不应将div个元素放在<p>个元素中。解决此问题的一种简单方法是将div替换为span。

<p><span>Hello</span>&nbsp;<span class="show" /></p>

Answer 2

您可以将display：inline-block propery设置为P tag

<p><span>Doe, John</span>&nbsp;<div class="show"></div></p>

.show {
    background-image: url(http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png);
    background-size: contain;
    width: 40px;
    height: 40px;
    display: inline-block;
}
p{
    display: inline-block;
}

您可以在此处查看JSFIDDLE

div与背景图像在同一行上与某个跨度相同，而在p内

2 个答案: