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,2：如上所述 Dave A 和 BabyAzerty
解决方案3：如果它只是一个模态，并且在所有内容中都相同

<强> your.css
```
.ui-button {
    margin-left: 10px !important;
}
```
解决方案4：如果你有更多的模态

<强>的javascript

//用dialogClass选项调用你的对话框然后你可以玩任何东西:)
$（＆＃34;＃dialog＆＃34;）。dialog（{dialogClass：＆＃34; my-style＆＃34;}）;

<强> your.css

.my-style .ui-button {margin-left：10px！important; }

如何在jquery UI对话框上增加按钮之间的水平空间？

3 个答案: