两个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放一行不能对齐的主要内容,如果未能解决你的问题,请参考以下文章

input和label同一行并且对齐

input和label同一行并且对齐

[BZOJ 4563]放棋子

bzoj4563 [Haoi2016]放棋子

BZOJ4563 [Haoi2016]放棋子

2N皇后