макет автозаполнения пользовательского интерфейса jquery / css

#css

#css

Вопрос:

У меня проблема с css с jquery / jquery ui / автозаполнением

 <script type="text/javascript">
  $(function() {
  $("#search").autocomplete({
    source: "autocomplete.php",
    minLength: 2,
    select: function(event, ui) {
      window.location.href = "http://site.com/"   ui.item.id   ".html";
      $("#search").val(ui.item.label);
    }
    })

    .data("autocomplete")._renderItem = function (ul, item) {
       return $('<li class="ui-menu-item-with-icon"></li>')
        .data("item.autocomplete", item)
        .append('<a style="height: 50px;" class="ui-corner-all"><img src="thumb.php?img='   item.img   '" class="ajaxsearchimage">'   item.label   '</a>')
        .appendTo(ul);
    };
    });
    </script>
    <style>
    span.searchicon
    {
      display: inline-block;
      height: 50px;
      width: 50px;
    }

    .ajaxsearchtext
    {
      padding-left: 60px;
      display: inline-block;
    }
    </style>
  

Я хотел бы выровнять текст сверху
Я пытался поместить vertical-align: top в класс, но это не работает.

http://imageshack.us/photo/my-images/4/sansrer.png/

У кого-нибудь есть решение?

С уважением

Ответ №1:

вам нужно применить свойство к изображению

 img {vertical-align:text-top;}
  

пример
http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align

Обновить

после комментариев я предлагаю переместить изображение влево, что было бы решением.

 img.SelectedClass { float: left; }
  

Комментарии:

1. если я смотрю на правильную вещь, при наведении курсора мыши на содержимое вес шрифта меняется на обычный, и строка помещается в строку. Дайте мне минуту подумать над этой проблемой. Немедленное решение — немного уменьшить размер шрифта или изменить вес шрифта на нормальный, но это не решит проблему, если описание будет длиннее в другом месте.

2. хорошо, на изображении вместо выравнивания по вертикали: текст-сверху измените его на плавающий: слева