html - span，input和div元素之间有什么区别？

时间：2011-09-13 04:48:51

标签： html css css3

如果您查看我的代码（here），我会将input元素提供给form1中的span和form2.span元素。 form2.span是内联的，input也是内联元素，但为什么它们以不同的方式显示？如果没有，那么input元素呢？

span，input和div元素之间的区别是什么？

答案 0 :(得分：6)

一些事情：

这个文件没有DOCTYPE（也没有<html>标签），它在这里做得不多，但如果不是因为它会使某些浏览器进入'怪癖'模式，可以做一些随机的事情
您的输入在下一行的原因是因为它们不适合上面的行。这是因为表格宽度设置为263px，标签宽度设置为80px，输入宽度设置为200px。 200 + 80px大于263px，因此它移动到下一行。
您在表单2中添加的文本的随机位实际上并不在<span>标记中。
电子邮件显示在随机文本之前的原因是因为它浮动到左侧，因此它会移动到未浮动的随机文本（This link是一个很好的链接来解释）。
电子邮件向上移动的另一个原因是它适合那里，记住标签是80px。 80 + 80 +（随机文本宽度）小于263px，表格宽度设置为。

至于div和spans / inline元素之间的区别。在Google中查找“内联vs块元素”，或者甚至在StackOverflow上查看，我确信它已被覆盖了几次。