在帶圖標的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

回答