0

青い追加画像をアルファベットの文字と同じ行に配置するのに苦労しています。ここでわかるように、常にアルファベットの下に表示されます。

ここに画像の説明を入力

これは、私の最新の試み (空白:nowrap) を示す HTML です。

<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>')
});

私が見つけたすべての解決策は、私が上で試みたことを行うように言っていますが、何も機能していません。アルファベットと同じ行に追加画像を表示するにはどうすればよいですか?

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 に答える