两个input放一行不能对齐
Posted zhangjingyun
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了两个input放一行不能对齐相关的知识,希望对你有一定的参考价值。
若两个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
以上是关于两个input放一行不能对齐的主要内容,如果未能解决你的问题,请参考以下文章