css - 兄弟元素之间产生位置偏移的原因
本文介绍了css - 兄弟元素之间产生位置偏移的原因的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
正常情况下应该如左边所示
但是在我们设置好第一个 input 表单,让它实现了居中,之后再加上一个 input 按钮元素,我们会发现第一个 input 表单会发生 2px 的向下偏移,当我们完全设置好了第二个按钮表单的位置的时候,第一个 input 表单已经彻底发生了第二次的偏移,偏移的量就是button表单的margin-top;情况如图右边所示
html结构
<div class="search_box">
<input type="text" name="search" class="search">
<input type="button" name="search_btn" class="search_btn">
</div>
css样式
.search{
height: 14px;
width: 215px;
font-size: 14px;
padding:11px 6px;
margin: 10px 0;
border: 2px solid #9E9E9E;
border-right: none;
position: relative;
}
//添加了按钮样式之后产生偏移情况
.search_btn{
margin: 10px 0;
height: 41px;
width: 92px;
background: url(../images/head_btn.gif) left top no-repeat;
border: none;
}
解决方法,对第一个表单元素,设置 float:left 浮动,使它脱离文档流
<input type="text" name="search" class="search" fl>
这个时候,我们会发现第二个表单元素完全向左靠近了第一个表单,而且位置也是如同预期,处于居中,如图左所示
但是为什么会出现这样的问题呢?为什么设置浮动就可以解决问题了?
解决方案
首先行内元素默认的 vertical-align 是 baseline
因为你的 input 元素设了一个 font-size: 14px,而输入框默认里边是有文字的,所以这个元素是按文字的大小 14px 来计算 baseline
而 button 元素里没有文字,是以高度 41px 来计算
所以如果你在输入框中任意输出一些文字,会发现这些文字的下沿和按钮的下沿是平齐的
那么想要解决问题就很好办了,以下两种方法都可以:
两个元素都加上 vertical-align:middle,可以保证以中线对齐;
button 元素里加上 value(不知道只填个空格能不能行……没试),可以使基线以文字的来算
这篇关于css - 兄弟元素之间产生位置偏移的原因的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文