如何将div与图像保持在同一行中与另一个带文本的div

Question

我很难让我的蓝色添加图像与字母表中的字母位于同一行。正如你在这里看到的，它总是显示在字母表下方：

这是HTML，显示了我最近的尝试（white-space：nowrap）：

<div style="width:900px">
    <fieldset>                
        <div style="width:900px"><h2>abook</h2></div>
        <div class="center" id="headerAlphabet" style="white-space:nowrap"></div>
    </fieldset>
</div>

以下是我在JavaScript中的准备功能。循环通过附加到div来创建字母表的字母。然后，当它添加添加图像时，它最终会出现在新行上。

这是我最近的尝试，显示float:left。我还尝试了display:block和display:inline。我也试过把它们放在锚标签中。而且我已经尝试了其他我现在不记得的事情。

$(function () {
    // Show the letters of the alphabet, with a link to call GetEntries() for each of them.
    for (var i = 65; i <= 90; i++) {
        $('#headerAlphabet').append('<a href=\"#\" onclick=\"GetEntries(\''
            + String.fromCharCode(i) + '\')\">'
            + String.fromCharCode(i) + '</a> ');
    }

    $('#headerAlphabet').append('<a href=\"#\" onclick=\"AddEntry()\">'
            + '<img src=\"/Scripts/Home/add.png\" title=\"Add contact\" style=\"float:left\" /></a>')
});

我发现的每一个解决方案都说要做我上面尝试过的事情，但没有任何效果。如何将我的添加图像与字母表放在同一行？

Answer 1

http://jsfiddle.net/VKmN7/

我猜您正在使用css重置或类似的设置，将所有img标记设置为display:block;。将附加的img设置为display:inline;：

a img { display:inline; }

Answer 2

如果图像位于＆lt; a＆gt;标记，尝试浮动＆lt; a＆gt;标签离开。

然后确保有足够的空间让所有人都适合，900px可能不适合。