在带图标的Jquery按钮中：图标和文本之间没有空格？

问题是字体太大了，所以我添加了这个CSS：

.ui-button .ui-button-text { 
    font-size:60%; 
}

但现在问题我的图标和我的文字之间没有空间吗？

在这里看到演示（的jsfiddle）：http://jsfiddle.net/Rn9tg/71/

有没有解决？

谢谢。

2012-03-01 Bronzato

你试过' '？ – j08691 2012-03-01 17:10:01

是的，但它不是很优雅:)我想我的css有一些错误>> .ui-button .ui-button-text {font-size：60％; } – Bronzato 2012-03-01 17:12:13

[更新]：使用左保证金规则不使用图标只按钮的作用。我将left-margin规则替换为似乎解决问题的text-indent规则。

添加下面的CSS规则

.ui-button-text:nth-child(2) { 
    text-indent: 5px; 
}

此请示，任何ui-button-text类，这是父母的第二个孩子应该有5像素的左缘。在这种情况下，当标签位于图标的前面时，该标签始终是第二个孩子。

了解有关nnth-pseudo伪选择器的更多信息，请登录css-tricks。

[更新] Internet Explorer - 尤其是旧版本 - 不能正确支持nth-chil伪选择器。在这种情况下，你应该使用jQuery来强制IE使用额外的类。

添加下面的类在IE独家CSS文件：

.button_left_margin_label { 
    text-indent: 5px; 
}

使用jQuery，迫使IE使用上述类的标签，其法洛斯一个图标：

if IE {$('.ui-button-text:nth-child(2)').addClass('button_left_margin_label');}

2012-03-01 17:38:30

这似乎是一个很好的解决方案，但不幸的是它不适用于带有图标的按钮。我尝试使用IE和Chrome，但没有成功。看到这里：http://jsfiddle.net/Rn9tg/96/ – Bronzato 2012-03-01 17:53:44

我看到...所以通过“文本缩进”规则来改变“margin-left”。这是解决问题:) – 2012-03-01 18:00:12

它的工作原理，非常感谢你的毅力。 – Bronzato 2012-03-01 18:12:57

<a data-bind="click: greet, jqButton: { icons: { primary: 'ui-icon-gear' }}">&nbsp&nbsp&nbspTest</a>

您只需为文本添加左边距，以便文本和图标之间有空格。检查jsfiddle。

2012-03-01 17:12:18 nightf0x

感谢您的回复，但我已经尝试了此解决方案。正如你在jsFiddle中看到的只有图标的按钮，我们右边的空间太多了。我想要一个解决方案，其中每个不同的按钮都被正确格式化。 – Bronzato 2012-03-01 17:13:45

在文本前添加一个非分隔空格（或两个）。像这样jsFiddle。因此，不是仅仅使用“测试”，而是使用"   Test"

2012-03-01 17:12:51 j08691

我同意这个解决方案的作品，但我希望有一个更优雅的解决方案，比在文本前面添加一些空格... – Bronzato 2012-03-01 17:18:29

我已经看到了与代码一起玩的演示，并为您获取了解决方案。这里是CSS

.ui-button .ui-button-text { 
    font-size:60%; 
    min-height: 13px; 
    margin-left:5px; 
}

给文本的边距留下来，你会看到空间被添加。

我希望我帮你..

2012-03-01 17:13:45

谢谢，但是当我回应Anirvan时，此解决方案并不适合我，因为所有按钮的格式不正确：在仅带有图标的按钮中，左侧的空间太多。 – Bronzato 2012-03-01 17:16:36

回答