有一個問題與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; 
} 

你可以看到代碼，它顯示的內容：fiddle

Answer 1

添加vertical-align: top到img秒。

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

此問題發生，因爲默認vertical-align爲baseline，see here以獲取更多信息。

Answer 2

將float:left;加到#ftr_top_ctr a並給它一個line-height:16px;。爲圖標添加規則：#ftr_top_ctr a img {float:left;}。 Fiddle。

Answer 3

試試這個：http://jsfiddle.net/86ZEf/8/

而不是添加一個邊框的一個元素，把它添加到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 
}