span,input和div元素之间有什么区别?

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

标签: html css css3

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

spaninputdiv元素之间的区别是什么?

1 个答案:

答案 0 :(得分:6)

一些事情:

  1. 这个文件没有DOCTYPE(也没有<html>标签),它在这里做得不多,但如果不是因为它会使某些浏览器进入'怪癖'模式,可以做一些随机的事情
  2. 您的输入在下一行的原因是因为它们不适合上面的行。这是因为表格宽度设置为263px,标签宽度设置为80px,输入宽度设置为200px。 200 + 80px大于263px,因此它移动到下一行。
  3. 您在表单2中添加的文本的随机位实际上并不在<span>标记中。
  4. 电子邮件显示在随机文本之前的原因是因为它浮动到左侧,因此它会移动到未浮动的随机文本(This link是一个很好的链接来解释)。
  5. 电子邮件向上移动的另一个原因是它适合那里,记住标签是80px。 80 + 80 +(随机文本宽度)小于263px,表格宽度设置为。
  6. 至于div和spans / inline元素之间的区别。在Google中查找“内联vs块元素”,或者甚至在StackOverflow上查看,我确信它已被覆盖了几次。