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();
});
});

这里还有一个 link 的 jsfiddle 代码，这样你就可以想象我的意思了：http://jsfiddle.net/14sxbj59/

非常感谢您！

Answer 1

在您的代码中添加以下内容：

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

检查Fiddle。

Answer 2

.ui-icon class 默认启用 display: block 样式。

您需要将其更改为 inline-block 才能正常工作。对于此示例，我使用了您创建的 .ui-btn-icon-left class。

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

JSFiddle

jQueryUI 图标总是显示在顶部而不是内联

jQueryUI icons are always shown on the top instead of inline

html

javascript

css

jquery

jquery-ui