小白求助一个input不对齐的问题

mongsun 2020-01-30 10:26:38

求助为啥输入框不是处于container内部，而是掉到下面了？



<!DOCTYPE html>

<html>

<head>

	<title>title</title>

	<style type="text/css">

		*{margin:0;padding:0;}



		.container{

			height:50px;

			background:green;

		}



		.container input{

			height:100%;

			background:red;

		}



		.container div{

			width:50px;

			height:100%;

			background:yellow;

			display:inline-block;

		}



	</style>

</head>

<body>

	<div class="container">

		<input type="text"><div></div>

	</div>

</body>

</html>

...全文

161 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

指尖魔术师 2020-01-31

打赏
举报

因为display: inline-block成了内联，inline box有一个叫做baseline的东西，想要更改很简单只要vertical-align: top;和vertical-align: bottom;，要想了解详细的话，可以看看这个，另外即使加上了vertical-align后，input有默认的边框在chrome中上下各两像素，因此input实际高度为54px，有两种办法解决这个问题，根据实际情况来选择，第一种是去掉input边框，设置一个border: none，另外一种方式是给input设置box-sizing: border-box; 新代码如下：


<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <style type="text/css">
        *{margin:0;padding:0;clear:both;}
 
        .container{
            height:50px;
            background:green;
        }
 
        .container input{
            height:100%;
            background:red;
			border: none; /*方法一*/
			/*box-sizing: border-box;*/ /*方法二*/
			vertical-align: top;
        }
 
        .container div{
            width:50px;
            height:100%;
            background:yellow;
            display:inline-block;
        }
 
    </style>
</head>
<body>
    <div class="container">
        <input type="text"><div></div>
    </div>
</body>
</html>