jQueryUI圖標始終顯示在頂部而不是內聯

Question

我想用jQueryUI創建一些按鈕，並帶有一些圖標以獲得更好的風格。 我的問題是圖標總是顯示在按鈕文本的頂部。 是否有可能顯示圖標始終與文本內聯？

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<button><sub class="ui-icon ui-icon-closethick ui-btn-icon-left"></sub>Delete Result</button>

JS

$(function() {
$( "input[type=submit], a, button" )
.button()
.click(function( event ) {
event.preventDefault();
});
});

這里還有jsfiddle與代碼的鏈接，以便您可以想象我的意思： http ： //jsfiddle.net/14sxbj59/

非常感謝你提前！

Answer 1

添加以下代碼：

.ui-state-default .ui-icon {
    display: inline-block;
}

檢查小提琴 。

Answer 2

.ui-icon類具有display: block默認情況下啟用display: block樣式。

您需要將其更改為inline-block才能使其正常工作。 在本例中，我使用了您創建的.ui-btn-icon-left類。

.ui-btn-icon-left
{
    display: inline-block;  
    margin: 0;
}

的jsfiddle