0

我很难让我的蓝色添加图像与字母表的字母在同一行。正如您在此处看到的，它始终显示在字母表下方：

在此处输入图像描述

这是 HTML，显示了我最近的尝试（空白：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:blockand 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>')
});

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

4

2 回答 2

3

http://jsfiddle.net/VKmN7/

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

a img { display:inline; }
于 2013-03-15T01:38:37.943 回答
0

如果图像位于 < a > 标签内，请尝试将 < a > 标签向左浮动。

然后只需确保有足够的空间让它们都适合，900px 可能还不够。

于 2013-03-15T01:48:03.927 回答