ДИВ с фона изображения на той же строке, какой промежуток, в то же время внутри ар

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

---

Вы можете установить дисплей: встроенный блок Собственость к P тегу

<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