Как выровнять кнопку и значок в одной строке

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 CSS-класс, имеющий position: relative. Поэтому вы должны использовать top свойство CSS, чтобы установить позицию дна:

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

Это должно решить проблему