html - 'Div' 和 'Input' 标签表现不同

Question

我在做一个搜索工具，搜索栏本来是一个div，一切都很好，但是当我把它改成输入标签时，左边的空白消失了。有人可以解释为什么会发生这种情况。

这是我的代码(出于安全原因删除了 header HTML):http://jsfiddle.net/k3pv5cmh/

我已经尝试过 margin: auto、margin: 0 auto 和 margin-left: auto 和 margin-right:自动。但这些都不能解决问题。

在 JS Fiddle 上，您可以将输入标签更改为 div 标签并查看差异。

Answer 1

默认情况下，input 元素是内联元素。 div 是 block 级元素。因此，将您的 css 更改为:

#search-bar {
    height: 50px;
    width: 60%;
    max-width: 800px;

    background-color: white;
    border: 2px solid rgb(230, 230, 230);
    border-radius: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20%;
    display:block;
}

注意:display:block;