CSS代码转移到外部样式表时列定位更改

Question

当CSS代码在内部时（与HTML代码在同一页面上），一切正常。但是当我将spans的CSS代码传输到外部样式表时，第2列到第5列的位置低于第一列。

以下是CSS代码：

.col {
      margin-top:10px;
      width:20%;
      float:left;
     }
.col li {
      font-size:9px;
      padding:10px 10px 10px 0px;
      border-bottom:1px solid #f6f4e7;
      line-height:15px;
     }
.col li:hover {
      background:#f7f3e3;
     }
.first span {
      background:url(http://website/image1) no-repeat left;
      padding:10px 0;
      padding-left:35px;
      }
.second span {
      background:url(http://website/image2) no-repeat left;
      padding:10px 0;
      padding-left:35px;
      }
.third span {
      background:url(http://website/image3) no-repeat left;
      padding:10px 0;
      padding-left:35px;
      }
.fourth span {
      background:url(http://website/image4) no-repeat left;
      padding:10px 0;
      padding-left:35px;
      }
.fifth span {
      background:url(http://website/image5) no-repeat left;
      padding:10px 0;
      padding-left:35px;
      }

以下是HTML代码：

<ul class="col">
     <li class="first"><span><a href="/page1">anchor text</a></span></li>
</ul>
<ul class="col">
     <li class="second"><span><a href="/page2">anchor text</a></span></li>
</ul>
<ul class="col">
     <li class="third"><span><a href="/page3">anchor text</a></span></li>
</ul>
<ul class="col">
     <li class="fourth"><span><a href="/page4">anchor text</a></span></li>
</ul>
<ul class="col">
     <li class="fifth"><span><a href="/page5">anchor text</a></span></li>
</ul>

我尝试用ul替换div，但它甚至变得更糟，定位问题仍然存在。就像这样：

非常感谢任何反馈。