如何增加jQuery UI對話框上的按鈕之間的水平空間？

Question

我正在使用jquery ui dialog，我想看看是否有任何方法在對話框中的按鈕之間包含水平空間？我在文檔或Google搜索中看不到任何內容。

Answer 1

最好的方法是將樣式添加到按鈕。具體來說，margin-right，或margin-left值：

buttons: [ 
    { text: "Save", click: function() { alert("save"); }, style:"margin-right:40px;" }, 
    { text: "Cancel", click: function() { alert("close"); ;}, style:"margin-left:0px;" } 
] 

隨時與此fiddle玩。

您增加得越多margin-left或margin-right，按鈕的水平分離越多。

或者，您也可以創建類，但在這種情況下，id傾向於內聯樣式，因爲這是一種本地化的使用。

Answer 2

非常簡單地使用jQuery UI爲您提供的類標記。無需調整使用JavaScript什麼，只是使用純CSS：

.ui-dialog-buttonset button:not(:first-child) { 
    margin-left: 20px; 
} 

（:Not選擇不IE6/7，而且適用於所有其他的瀏覽器，它工作正常）

Answer 3

取決於..

1. 解決方案1，2：如戴夫甲和BabyAzerty上述

2. 解決方案3表示：如果它，我唯一的一個模式，並同對面一切

   your.css

   .ui-button { 
       margin-left: 10px !important; 
   } 
   

3. 解決方案4：如果你有更多的模態

   的JavaScript

   //調用你的對話框與dialogClass選項，然後你可以玩任何東西:)
   $（「#dialog」）.dialog（{di alogClass：「my-style」}）;

   your.css

   。我的風格的.ui鍵{保證金左：10px的重要; }