为什么 jqueryUI 按钮和按钮集的位置不同？

Question

我有很多应该显示在彼此下方的按钮。在某些行中，应该只有一个按钮，而其他行应该包含两个带有 jQuery UI 按钮集的按钮。

这是一个示例代码：

$( "button" ).button();
$( ".split" ).buttonset();

div {
    width: 280px;
    text-align: center;
}

div button {
    width: 70%;
}

button.splitleft {
    width: 55%;
}

button.splitright {
    width: 15%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="regular">
    <button type="button">Click me!</button>
</div>
<div class="split">
    <button type="button" class="splitleft">Split button</button>
    <button type="button" class="splitright">B</button>
</div>

不幸的是，结果没有正确对齐。此外，按钮组的总宽度与其上方的按钮宽度不同。

为什么会这样？为什么 jQuery UI 按钮和按钮集的格式不同？有没有一种方法可以使它们具有相同的宽度，而不必 fiddle 使用边距等像素值？

Answer 1

取消设置按钮的水平边距，以便正确计算中心。同时去掉两个按钮之间的"space"：

$("button").button();
$(".split").buttonset();

@import url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css);

div {
  width: 280px;
  text-align: center;
}
.regular .ui-button {
  margin-right: 0;
  width: 70%;
}
.split .splitleft {
  margin-right: 0;
  width: 55%;
  border-right-width: 0;
}
.split .splitright {
  margin-right: 0;
  width: 15%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="regular">
  <button type="button">Click me!</button>
</div>
<div class="split">
  <button type="button" class="splitleft">Split button</button><!--
  --><button type="button" class="splitright">B</button>
</div>

为什么 jqueryUI 按钮和按钮集的位置不同？

Why are jqueryUI button and buttonset positioned differently?

html

javascript

css

jquery

jquery-ui