使用javascript将项目定位在无序列表中

时间:2012-12-06 20:50:04

标签: javascript css list css-float

我有demo。我想对齐来自javascript侧的红色箭头,如picture中所示。但我无法弄清楚我该怎么做。如果我在float:left;内添加.ikinciSol ul li a阻止箭头向左移动,但破折号和其他部分将被销毁。

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

我如何修改这些部分?或者有更简单的方法吗?

2 个答案:

答案 0 :(得分:1)

删除img标记并修改列表元素:

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

答案 1 :(得分:1)

您可以将div替换为span代码,因为无论如何将其显示设置为inline。这似乎有效,你也可以摆脱所有的浮动属性:

JSFiddle sample code