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按钮和按钮组的格式不同？有没有办法让它们具有相同的宽度，而不必为边距等提供像素值？

Answer 1

取消设置按钮上的水平边距，以便正确计算中心。同时删除＆＃34;空格＆＃34;两个按钮之间：

＆＃13;

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

＆＃13;

@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%;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: