解决父元素的padding对子元素的input失效问题

最新推荐文章于 2024-02-28 17:16:55 发布

奇喑

最新推荐文章于 2024-02-28 17:16:55 发布

阅读量1k

点赞数 2

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/asd0356/article/details/112692573

版权

前端专栏收录该内容

70 篇文章 8 订阅

订阅专栏

本文介绍了如何解决在含有padding的div元素中，input标签与icon元素显示异常的问题。主要提供了两种解决方案：一是通过设置input的`vertical-align: top;`属性实现居中对齐；二是利用浮动(float)布局调整元素位置。这两种方法均能在不改变父元素布局的情况下达到预期效果。

摘要由CSDN通过智能技术生成

问题描述

在一个含有padding的div元素中包含一个input标签和一个icon，但是input元素显示异常。（具体表现为父元素的padding对子元素的input失效）
异常效果图：
在这里插入图片描述
案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Taoism</title>
	<style>
		* {
			box-sizing: border-box;
		}

		.container {
			height: 64px;
			width: 300px;
			padding-top: 16px;
			padding-bottom: 16px;
			background-color: palevioletred;
		}

		.input {
			height: 32px;
			width: 200px;
		}

		.icon {
			display: inline-block;
			height: 32px;
			width: 32px;
			background-color: aquamarine;
		}
	</style>
</head>

<body>
	<div class="container">
		<input class="input" type="text">
		<div class="icon"></div>
	</div>
</body>

</html>

解决方案

方案一

由于input标签默认的display为inline-block并且icon的display也为inline-block，现在我们想要改变input的垂直对齐方式，此时不难想要使用此css属性：vertical-align。
给input标签添加以下一行代码即可使其行类元素居中对齐：

vertical-align: top;

效果图如下：
在这里插入图片描述

方案二

我们知道产生此异常的原因是由于display: inline-block，如果将其改成display: block则不会出现此异常，但是我们目的就是想将这两个元素在一行内居中显示，所以此时就需要使用另一种css属性：float。
修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Taoism</title>
	<style>
		* {
			box-sizing: border-box;
		}

		.container {
			height: 64px;
			width: 300px;
			padding-top: 16px;
			padding-bottom: 16px;
			background-color: palevioletred;
		}

		.input {
			height: 32px;
			width: 200px;
			display: block;
			float: left;
		}

		.icon {
			display: block;
			float: left;
			height: 32px;
			width: 32px;
			background-color: aquamarine;
		}
	</style>
</head>

<body>
	<div class="container">
		<input class="input" type="text">
		<div class="icon"></div>
	</div>
</body>

</html>

效果图如下：
在这里插入图片描述

结语

正所谓条条大路通罗马，面对css布局所产生的bug时，只要能够掌握足够多的css属性，至少总能够找到一种比较满意的解决方案。

奇喑

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决父元素的padding对子元素的input失效问题

文章目录问题描述解决方案方案一方案二更多方案结语问题描述在一个含有padding的div元素中包含一个input标签和一个icon，但是input元素显示异常。（具体表现为父元素的padding对子元素的input失效）异常效果图：案例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Taoism</title> <s
复制链接

扫一扫