Question

我在我的项目中使用了一个jQuery UI自动完成组合框，并修改了CSS：

.custom-combobox {
    border: 0px;
    background: #fff;
    font-weight: normal;
    color: #ffffff;
    width:76%;
    height:18px;
  }
  .custom-combobox-toggle {
    position: absolute;
 top:-3px;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    width:20px;
    height:20px;
  }
  .custom-combobox-input {
    border: 0px;
    background: #fff;
    font-weight: normal;
    color: #ffffff;
    width:76%;
    height:18px;

}

但是我无法正确定位按钮 - 它可以是字段的上方或下方而不是内联，并且由于百分比宽度，它有时会进入下一行。

如何在按字段旁边修复按钮？

Answer 1

我通常做的是将字段和按钮包装成div，这有助于我将它们一起移动。例如：

<form id="nameForm" action="/submit" method="post">
<div>
    <input type="text" name="first_name"/>
    <input type="submit" value="Send"/>
</div>
</form>

这样我可以强制包装器对两个输入都足够大，如果它们不能组合在一起，它们会一起移动到下一行。

<style type="text/css">
#nameForm {
  width: 500px;
}
#nameForm div > input {
  width: 350px;
}
#nameForm div > input + input[type=submit] {
  width: 100px;
}
</style>

JqueryUi自动完成组合框按钮

1 个答案: