Question

我正在制作一个搜索工具，搜索栏最初是一个div，一切都很好，但当我将其更改为输入标签时，左边的边距消失了。有人可以解释为什么会发生这种情况。

这是我的代码（出于安全原因删除了标题HTML）：http://jsfiddle.net/k3pv5cmh/

我已尝试margin: auto，margin: 0 auto和margin-left: auto margin-right: auto。但这些都没有解决问题。

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

Answer 1

默认情况下，input元素是内联元素。 div是块级元素。所以改变你的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;

Answer 2

只需将display: block;添加到您的#search-bar定义中即可。输入基本上是行元素，这意味着margin: auto;无效。

Answer 3

默认情况下，输入的样式为：display: inline-block;

另一方面，

Div，默认情况下为样式：display: block

不同之处在于每个样式占用多少容器。您可以看到他们的差异here

如果你想要相同的行为，你只需要放输入元素中的style="display: block"并覆盖其默认样式。

Answer 4

如果要保持输入标记内联，也可以添加#container { text-align: center; }。在这种情况下，您可以摆脱输入标签的左右边距并在其旁边放置一些东西（可能是按钮）。

'Div'和'Input'标签的行为不同

4 个答案: