如何在同一行中对齐按钮和图标

Question

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

按钮和输入框不在同一行。图标在按钮外面。

如何强制下拉按钮与按钮中心的输入框和图标位于同一行？

<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'} });

更新

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

如何设置合适的宽度？

<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;   
    }

Answer 1

您使用jQuery UI Button（.button({ icons: { primary: 'ui-icon-triangle-1-s'} });）添加.ui-button具有position: relative的CSS类。因此，您应该使用top CSS属性来设置botton的位置：

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

Answer 2

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

这应解决问题