JQueryUI / SelectMenu - 底部

Question

我有以下使用HTML / JQuery的{​​{1}}代码。

我需要摆脱你在附图上看到的JQueryUI（红色区域）。

这里有相应的bottom padding：

https://jsfiddle.net/s8jmq2zh/

＆＃13;

＆＃13;

JSFiddle

＆＃13;

$(function() {
  $("select").selectmenu();
});

＆＃13;

＆＃13;

＆＃13;

结果：

关于如何解决这个问题的任何想法？

Answer 1

额外的填充是因为jQueryUI样式表将.ui-selectmenu-button元素呈现为display: inline-block，它在样式化的选择菜单下添加了一些空格。要解决此问题，请覆盖该样式并设置display: block;：

$(function() {
  $("select").selectmenu();
});

table .ui-selectmenu-button { display: block; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<table>
  <tr>
    <td style="background-color: #f00;">
      <select style="width: 200px;">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </select>
    </td>
  </tr>
</table>

Answer 2

您的假选择下拉列表是inline-block元素，因此您的空间只是空格。如果您为此假输入display: block设置了ui-selectmenu-button ui-widget ui-state-default ui-corner-all，则会删除不需要的空间。

您可以按照以下方式应用它：

.td > .ui-selectmenu-button {
    display: block;
}

如果这不会覆盖现有的样式，请添加!important。