为什么这些元素对齐？ [英] Why are these elements unaligned?

问题描述

我创建一个搜索栏和放大器;与jQuery这样的按钮形式：

I am creating a search bar & button form with jquery like this:

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设置与此

The CSS is set with this

.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找出来是这样的：

The HTML comes out looking like this:

这篇关于为什么这些元素对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！