若两个input都是text属性，并且不设置字号大小，那么两个input可以在一行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>aa</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> *{margin:0;padding:0;} .aa{width: 300px;height: 40px;border:1px solid red;} .bb{width: 100px;height: 40px;border:1px solid green;} </style> </head> <body> <input type="text" value="aa" class="aa"><input type="text" value="bb" class="bb"> </body> </html>
若两个input都是text属性，设置字号大小，那么两个input将出现两个不在一行的情况（字号很大的时候）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>aa</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>aa</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> *{margin:0;padding:0;} .aa{width: 300px;height: 40px;border:1px solid red;} .bb{width: 100px;height: 40px;border:1px solid green;} </style> </head> <body> <input type="text" value="aa" class="aa"><input type="button" value="bb" class="bb"> </body> </html>
原因不知道为什么
*{margin:0;padding:0;} .aa{width: 300px;height: 40px;border:1px solid red;} .bb{width: 100px;height: 40px;border:1px solid green;font-size: 34px;} </style> </head> <body> <input type="text" value="aa" class="aa"><input type="text" value="bb" class="bb"> </body> </html>
若两个input不都是text属性，一个是text属性，一个是button属性，input type="button"设置的border不起作用，连个input即使设置高度值一样，但实际高度仍然是不一样的
针对两个行内元素中间出现间隙的bug
http://www.jianshu.com/p/50e6cb9aeed6