Html 在H3旁边显示精灵背景图像DIV

我有以下HTML：

<div style="display: inline-block; width: auto;">
    <h3>
        Search Criteria
    </h3>
    <div style="background-image: url(jQuery-UI/images/ui-icons_2e83ff_256x240.png);
        background-repeat: no-repeat; background-position: -16px -144px; width: 16px;
        height: 16px;">
    </div>
</div>

搜索条件

我试图让

div

显示在

h3

的右侧。但是，实际情况是，

div

直接显示在

h3

下

---

我缺少什么？

你需要

浮动

你的

H3

和

div

看看这个JSFIDLE。我添加了一个背景色的div，因为我没有图像

---

不客气：）您可能希望在div后面直接放置一个带有背景图像的图标。只是为了清除浮动，以便以后不干扰任何内容，您不需要同时浮动这两个元素。如果你这样做了，别忘了清理容器。