Jquery ui 如何对齐同一行中的按钮和图标

下面的代码生成按钮和图标：

按钮和输入框不在同一行中。图标位于按钮外部

如何强制下拉按钮与按钮中心的输入框和图标在同一条线上

<form id="Form" class='form-fields'>
<div class='form-field'><label class='form-label' for='Klient0_nimi'><u style='cursor:default' >Klient</u></label><span id='span_Klient0_nimi'><input style='width:100px'  maxlenght='80'  id='Klient0_nimi' name='Klient0_nimi' ></input>
<button type='button' class='form-combobutton' tabindex=-1 ></button>
</span>
</div>

CSS:


.form-fields
{
    padding:10px; 
}

.form-field
{
    display:inline-block;
    margin:2px; 
}


.form-label  
{
    padding-left:5px; 
    padding-right:5px; 
    font-family: Arial, Helvetica, sans-serif;
    font-size:xx-small;
}

.form-combobutton
{
   height: 20px;
   width: 20px;
   margin: 0;
   padding: 0;
   margin-left:-6px ;
}


javascript:

    $("button", newel)
    .button({ icons: { primary: 'ui-icon-triangle-1-s'} });

克利特
CSS:
.表单字段
{
填充：10px；
}
.表单字段
{
显示：内联块；
保证金：2倍；
}
.表格标签
{
左侧填充：5px；
右侧填充：5px；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：xx小；
}
.表单组合按钮
{
高度：20px；
宽度：20px；
保证金：0；
填充：0；
左边距：-6px；
}
javascript:
$（“按钮”，纽尔）
.按钮（{icons:{primary:'ui-icon-triangle-1-s'}}）；

更新

这两个答案都解决了对齐问题。但是按钮宽度非常大，忽略样式中的宽度：设置：

如何设置合适的宽度

<form id="Form" class='form-fields'>
<div class='form-field'><label class='form-label' for='Klient0_nimi'><u style='cursor:default' >Klient</u></label><span id='span_Klient0_nimi'>
<input  style='width:100px'  maxlenght='80'  id='Klient0_nimi' name='Klient0_nimi' value='' ></input>
<button class='form-combobutton' tabindex='-1'></button>
<script>$(function() {input_autocomplete($('#span_Klient0_nimi'), 'Klient0_nimi', 'DokG', 'KlientArvel') })</script>
</span>
</div>


javascript:

function input_autocomplete(newel, colName, entity, andmetp) {
    var input = $("input", newel);
    $(newel).parent().css({ display: "inline-block" }).parent().css({ 'padding-bottom': 0 });
    input.autocomplete({
        source: 'GetLookupList'
    }
   )
   .autocomplete('widget').css('font-size', '12px');

  $("button", newel).button({ icons: { primary: 'ui-icon-triangle-1-s' }, text: false });
}


css:


.form-fields
{
    padding:10px; 
}

.form-field
{
    display:inline-block;
    margin:2px; 
}


.form-label  
{
    padding-left:5px; 
    padding-right:5px; 
    font-family: Arial, Helvetica, sans-serif;
    font-size:xx-small;
}

.form-combobutton
{   height: 22px;   
    margin: 0 0 2px;   
    padding: 0;   
    margin-left:-6px ;   
    vertical-align:middle;
    width: 20px;   
    }

克利特
$（函数（）{input_autocomplete（$（'span#Klient0_nimi'），'Klient0_nimi'，'DokG'，'KlientArvel'））
javascript:
函数输入\自动完成（newel、colName、entity和metp）{
变量输入=$（“输入”，newel）；
$（newel）.parent（）.css（{display:“inline block”}）.parent（）.css（{“padding bottom”：0}）；
input.autocomplete({
来源：“GetLookupList”
}
)
.autocomplete（'widget'）.css（'font-size'，'12px'）；
$（“button”，newel）.button（{icons:{primary:'ui-icon-triangle-1-s'}，text:false}）；
}
css:
.表单字段
{
填充：10px；
}
.表单字段
{
显示：内联块；
保证金：2倍；
}
.表格标签
{
左侧填充：5px；
右侧填充：5px；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：xx小；
}
.表单组合按钮
{高度：22px；
边际：0.02倍；
填充：0；
左边距：-6px；
垂直对齐：中间对齐；
宽度：20px；
}

这应该可以解决您使用（

.button（{icons:{primary:{ui-icon-triangle-1-s'}}）；

）添加

.ui-button

CSS类的问题。所以您应该使用

top

CSS属性来设置botton的位置：

.form-combobutton {
    /* other settings which you need */
    top:7px /* some value which looks good */
}

.form-combobutton {
    /* other settings which you need */
    top:7px /* some value which looks good */
}