我有表格形式的 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>
如果我水平缩小窗口,输入字段旁边的按钮将位于文本框下方。
无论窗口大小如何,我怎样才能强制按钮贴在输入框旁边?
最佳答案
执行此操作的方法是强制容器元素(在本例中,可能是标签)始终足够宽以容纳组合框和按钮。因此,无论容器元素的宽度有多宽,都应该是您的 min-width 值。因此,如果组合框是 200px 宽,按钮是 100px 宽(这是暂时假装不涉及边距),那么父容器应该有 min-width: 300px;
关于jQuery UI 自动完成(组合框)按钮对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16486696/