“Div”和“Input”标签的作用不同答案

【问题标题】：'Div' and 'Input' tag acting differently“Div”和“Input”标签的作用不同
【发布时间】：2015-07-29 17:40:51
【问题描述】：

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

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

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

在 JS Fiddle 上，你可以将输入标签更改为 div 标签并查看区别。

【问题讨论】：

你能解释一下你的要求是什么吗？
一种 css 样式，我可以添加到我的样式表（参见 js fiddle）以集中输入框 @GirdharSinghRathore
添加 css 作为 margin-left: 100px;或者根据你的页面你可以增加和减少输入框的左边距

标签： html css

【解决方案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;

【讨论】：

你只是打败了我 :)

【解决方案2】：

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

【讨论】：

【解决方案3】：

默认情况下输入具有样式：display: inline-block;

另一方面，Divs 默认有样式：display: block

不同之处在于每种样式需要多少容器。可以看到他们的区别here

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

【讨论】：

【解决方案4】：

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

【讨论】：