在无序列表中定位项目答案

【问题标题】：Positioning Items in Unordered List在无序列表中定位项目
【发布时间】：2012-12-06 12:17:24
【问题描述】：

我有一个demo。我想像picture 一样左对齐红色箭头。但我不知道我该怎么做。顺便说一下，来自 javascript 方面的红色箭头。

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

【问题讨论】：

这是因为 div 是向左浮动的。只需将float:left 添加到您创建的<a> 元素即可。

标签： javascript css css-float floating

【解决方案1】：

定义 .ikinciSol ul li a float:left;

在你的css中像这样

.ikinciSol ul li a{
float:left;
}

结果

【讨论】：

@Rohit，破折号的位置已更改。歌曲类中的项目也很少滑倒。

【解决方案2】：

您可以尝试另一种方法，使用 ::before 选择器。

像这样：

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

【讨论】：

您的方法适合这种情况。因为每次在 html 中声明 img 标签时，img 标签都会请求。仅在请求到达服务器后才使用 css。你的回答是对的。
那么，我怎样才能让这个背景图片可以被javascript点击呢？