使用CSS排列我的元素时出现问题

Question

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

这是我的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;
}

你可以看到代码及其显示的内容： 小提琴

Answer 1

将vertical-align: top添加到img 。

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

出现此问题的原因是默认的vertical-align是baseline ， 请参阅此处以获取更多信息。

Answer 2

添加float:left; 到#ftr_top_ctr a并给它一个line-height:16px; 。 为图标添加规则： #ftr_top_ctr a img {float:left;} 。 小提琴 。

Answer 3

试试这个： http ： //jsfiddle.net/86ZEf/8/

不是向元素添加边框，而是将其添加到li元素并在li元素上设置高度。 最后，删除“浮动”，将“li”设置为内联，你很高兴。 相关片段：

.btn_lnk ul li {
    display: inline;
    height: 22px;
    border: 1px solid;
    border-radius: 3px 3px 3px 3px;
    padding: 3px 4px;
}

这是更新的css的完整性：

.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;
    height: 22px;
    border: 1px solid;
    border-radius: 3px 3px 3px 3px;
    padding: 3px 4px;
}
a {
    text-decoration: none;
}

img {
    vertical-align: top
}