Positioning items in unordered list with javascript

Question

I have a demo . I want to align red arrows which are coming from javascript side left like in picture . But i couldn't figure out how do i do. If i add float:left; inside .ikinciSol ul li a block arrow goes left but dash and other parts become destroyed.

  function ytplayer_render_playlist( )
  {
    var arrOfListNodes = Array.prototype.filter.call(document.getElementById('mylist').childNodes, function (e) {return e.tagName === 'LI';});
    for ( var i = 0; i < ytplayer_playlist.length; i++ )
    {   
      var img = document.createElement( "img" );
      img.src = "track_arrow.gif";
      var a = document.createElement( "a" );
      a.href = "#ytplayer";
      a.onclick = (
        function( j )
        {
          return function( )
          {
            ytplayer_playitem = j;
            ytplayer_playlazy( 0 );
          };
        }
      )( i );
      a.appendChild( img );
      arrOfListNodes[i].insertBefore(a, arrOfListNodes[i].firstChild);
    }
  }

How can i modify these part? Or is there simpler way of doing it?

Answer 1

Get rid of the img tag and modify your list element:

ul li {
   list-style-image: url("track_arrow.gif");
}

Answer 2

You can replace the div with span tags, as you anyway set their display to inline . This seems to work, you can get rid of all the floats properties too :

JSFiddle sample code