jQuery UI 自动完成（组合框）按钮对齐答案

【问题标题】：jQuery UI autocomplete(Combobox) button alignmentjQuery UI 自动完成（组合框）按钮对齐
【发布时间】：2013-05-10 16:23:43
【问题描述】：

我有一个表格形式的 jQuery UI 自动完成组合框（http://jqueryui.com/autocomplete/#combobox）。

<tbody>
 <tr>
  <td><select id="someSelect"><option....></select></td>
  <td>....</td>
  <td>....</td>{*n}
 </tr>
</tbody>
<script>
  $('select#someSelect').combobox();
</script>

每行包含多个不超过 6 个的 TD 元素，包括组合框。

问题是当窗口大小根据其内容大小动态变化时，输入字段旁边的按钮会移动到输入框下方。

在选择框上调用 .combobox() 后：

<td>
  <select name="select1" id="ma1" style="display: none;">
    <option value="0">Select Attribute</option>
    <option value="ContactFirstName">ContactFirstName</option>
  </select>
  <input class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
  <button type="button" tabindex="-1" title="Show All Items" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span>
    <span class="ui-button-text"></span>
  </button>
</td>

如果我水平缩小窗口，输入字段旁边的按钮会位于文本框下方。

无论窗口大小如何，如何强制输入框旁边的按钮？

【问题讨论】：

只是一个建议，不要使用$('select#someSelect')，而是使用$('#someSelect') 来提高查询选择器的性能。

标签： jquery html css jquery-ui combobox

【解决方案1】：

这样做的方法是强制容器元素（在这种情况下，可能是标签）总是足够宽以容纳组合框和按钮。因此，无论多宽，都应该是容器元素的最小宽度值。因此，如果组合框是 200px 宽，而按钮是 100px 宽（这是假装不涉及边距的一秒钟），那么父容器应该具有 min-width: 300px;

【讨论】：