Positioning Items in Unordered List

Question

I have a demo. I want to align red arrows left like in picture. But i couldn't figure out how do i do. By the way red arrows coming from javascript side.

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

It's because the div is floated left. Just add a `float:left` to the `` element that you create. — MrCode, Dec 06 '12 at 12:22

score 2 · Answer 1 · answered Dec 06 '12 at 12:20

2

Define .ikinciSol ul li a float:left;

In your css as like this

.ikinciSol ul li a{
float:left;
}

Results

enter image description here

answered Dec 06 '12 at 12:20

Rohit Azad Malik

31,410
17
69
97

@Rohit, place of dash is changed. Also item inside song class is little slipped over. – mcan Dec 06 '12 at 12:46

score 1 · Answer 2 · answered Dec 06 '12 at 12:22

1

You could try an alternative way, using the ::before selector.

Like so:

artist_track::before {
  background-image: url(http://www.olmasigereken.com/demo2/track_arrow.gif);
  background-repeat: no-repeat;
}

answered Dec 06 '12 at 12:22

Andy

14,427
3
52
76

1

your approach is appropriate in this situation. because img tag will request every time when img tag declare in html. Using css only once the request goes to server. you answer is right. – w3uiguru Dec 06 '12 at 12:24
Then, how can i make this background image clickable by javascript? – mcan Dec 06 '12 at 20:52

Positioning Items in Unordered List

2 Answers2