为什么这些元素不对齐？答案

【问题标题】：Why are these elements unaligned?为什么这些元素不对齐？
【发布时间】：2014-04-27 09:58:24
【问题描述】：

我正在使用 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>

但最终的结果是这样的：

为什么搜索栏和按钮没有对齐？

【问题讨论】：

可能是因为line-height。你应该使用你的开发工具，并能够发现它的原因，使用 CSS 规则
试着给他们两个vertical-align:middle
设置字体大小：100%；而不是字体大小：30px；对于 .search_button。
是的，按钮的行高可能不应该只有 1px。我发现通常同一行上的所有元素都应该具有相同的行高，并且该高度应该足够大以容纳最大的元素。从那里，填充和边距来调整单个元素。

标签： jquery html css alignment

【解决方案1】：

将search_button font-size:30px 减少到font-size:15px DEMO

.search_button {

    font-size: 15px;

}

【讨论】：

【解决方案2】：

设置字体大小：100%；而不是字体大小：30px；对于 .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%;
 }

【讨论】：