Как сохранить div, с изображением, в той же строке, что и другой div с текстом

Question

Мне нелегко получить мое синее изображение, чтобы оно было на той же строке, что и буквы алфавита. Как вы можете видеть здесь, он всегда появляется ниже алфавита:

Это 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: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

Если изображение находится в пределах < тег>, попробуйте плавающей < а> теги влево.

Тогда просто убедитесь, что для них достаточно места, чтобы соответствовать, 900px может быть недостаточно.