使用 CSS 排列元素时遇到问题

我有一个包含链接的无序列表。有些链接是文本，有些是带有图标的文本。但我有一个问题，就是我无法让他们排队。有人可以建议我在这里做错了什么吗？我尝试了不同的组合，但仍然无法让事情排列起来。

这是我的 HTML 代码。请注意，我使用了另一个网站的图标。我无法链接到我自己的内部网站。

<div id="ftr_top_ctr" class="btn_lnk">
  <ul class="left">
    <li><a class="disabled" id="doCheckMark"   rel="nofollow">Mark</a></li>
    <li><a href="/aa" ><img class='ico' src="http://michaelwright.me/images/test.png" /></a></li>
    <li><a href="/aa" ><img class='ico' src="http://michaelwright.me/images/test.png" />Test</a></li>
  </ul>
</div>


div#ftr_top {
    height: 30px;
}
.btn_lnk ul.left {
    padding: 0 0 0 10px;
}
.btn_lnk ul {
    margin: 0;
}
.btn_lnk {
    font-size: 12px;
}
.btn_lnk ul li {
    display: inline;
    float: left;
    padding: 0;
    position: relative;
}
#ftr_top_ctr a {
    border: 1px solid;
    border-radius: 3px 3px 3px 3px;
    padding: 3px 4px;
}
a {
    text-decoration: none;
}

您可以看到代码及其显示的内容：fiddle http://jsfiddle.net/86ZEf/

Add vertical-align: top to the imgs.

http://jsfiddle.net/thirtydot/86ZEf/4/ http://jsfiddle.net/thirtydot/86ZEf/4/

发生这个问题是因为默认vertical-align is baseline, see here http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/了解更多信息。