如何對齊按鈕和圖標在同一行

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'} });）。所以你應該使用CSS屬性top來設置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類問題