问题描述
在一个含有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>
效果图如下:
更多方案
以上两种方案都是不改变父元素布局的方式来实现预期的效果,如果允许更改父元素的样式则还有更多的实现方案,比如flex布局,定位布局等等。
结语
正所谓条条大路通罗马,面对css布局所产生的bug时,只要能够掌握足够多的css属性,至少总能够找到一种比较满意的解决方案。