为什么这些元素不对齐？

Question

我正在创建一个搜索栏＆amp;按钮形式与jquery像这样：

var search_list_item = $("<li />");

var search_form = $("<form />", {
    name: "search_form",
    class: "search_form"
});

var search_input = $("<input />", {
    type: "text",
    name: "search_input",
    class: "search_bar"
});

var search_button = $('<input'
    + ' type="submit"'
    + ' value="&#128269;"'
    + ' class="search_button"'
    + ' name="search_button"'
  +' />');

search_form.append(search_input);
search_form.append(search_button);
search_list_item.append(search_form);

使用此

设置CSS

.search_bar{
    background-color:white;
    box-shadow: rgb(204, 204, 204) 0px 0px 0px 1px inset;
    border: 1px solid rgb(178, 210, 203);
    border-radius: 8px;
    height: 20px;
    width: 150px;
    font-size: 12px;
}

.search_button {
    cursor: pointer;
    border: 0px;
    background-color: #d4d4d4;
    font-family: 'EntypoRegular';
    color: #5f615c;
    font-size: 30px;
    line-height: 1px;
    padding: 0px;        
    height: 20px;
    width: 20px;
    left: 15.4%;
}

HTML看起来像这样：

<li>
    <form name="search_form" class="search_form">
        <input type="text" name="search_input" class="search_bar"/>
        <input type="submit" value="" class="search_button" name="search_button"/>
    </form>
</li>

但最终结果如下：

为什么搜索栏和按钮没有排列？

Answer 1

将search_button font-size:30px降为font-size:15px DEMO

.search_button {

    font-size: 15px;

}

Answer 2

设置font-size：100％;而不是font-size：30px; for .search_button

.search_button {
cursor: pointer;
border: 0px;
background-color: #d4d4d4;
font-family: 'EntypoRegular';
color: #5f615c;
font-size: 100%;
line-height: 1px;
padding: 0px;        
height: 20px;
width: 20px;
left: 15.4%;
 }