は、同じ行のボタンやアイコンを整列させる方法

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

を修正する必要があります。したがって、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; 
} 

これは、あなたがposition: relativeを持つ.ui-button CSSクラスを追加jQuery UI Button（.button({ icons: { primary: 'ui-icon-triangle-1-s'} });）を使用し、問題