Css JqueryUi自动完成组合框按钮

我在项目中使用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;

}

但是我不能正确地定位按钮——它要么在字段的上方，要么在字段的下方，而不是内联，而且由于宽度的百分比，它有时会延伸到下一行

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

---

如何将按钮固定在字段旁边？

我通常做的是将字段和按钮包装成一个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>

#姓名表{
宽度：500px；
}
#名称表单div>输入{
宽度：350px；
}
#nameForm div>input+input[type=submit]{
宽度：100px；
}